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

src/components/admin/ui-kit-section.tsx

@@ -16,6 +16,7 @@ import { StatesDemo } from './ui-kit/states-demo'
 import { MediaDemo } from './ui-kit/media-demo'
 import { InteractiveDemo } from './ui-kit/interactive-demo'
 import { BusinessDemo } from './ui-kit/business-demo'
+import { TimesheetDemo } from './ui-kit/timesheet-demo'
 
 export function UIKitSection() {
   return (
@@ -69,6 +70,9 @@ export function UIKitSection() {
           <TabsTrigger value="business" className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2">
             Бизнес
           </TabsTrigger>
+          <TabsTrigger value="timesheet" className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2">
+            Табель
+          </TabsTrigger>
         </TabsList>
 
         <TabsContent value="buttons" className="space-y-6">
@@ -126,6 +130,10 @@ export function UIKitSection() {
         <TabsContent value="business" className="space-y-6">
           <BusinessDemo />
         </TabsContent>
+
+        <TabsContent value="timesheet" className="space-y-6">
+          <TimesheetDemo />
+        </TabsContent>
       </Tabs>
     </div>
   )

src/components/admin/ui-kit/business-demo.tsx

@@ -1,19 +1,20 @@
-"use client"
+"use client";
 
-import { useState } from 'react'
+import { useState } from "react";
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { TimesheetDemo } from "./timesheet-demo";
-import { Badge } from '@/components/ui/badge'
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Button } from '@/components/ui/button'
+import { Badge } from "@/components/ui/badge";
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { Button } from "@/components/ui/button";
-import { Progress } from '@/components/ui/progress'
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Input } from '@/components/ui/input'
+import { Progress } from "@/components/ui/progress";
+import { Input } from "@/components/ui/input";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@/components/ui/select'
+} from "@/components/ui/select";
 import {
   Calendar,
   Check,
@@ -43,69 +44,71 @@ import {
   ChevronRight,
   Hash,
   Package2,
-  Truck
+  Truck,
-} from 'lucide-react'
+} from "lucide-react";
 
 export function BusinessDemo() {
-  const [selectedProduct] = useState(null)
+  const [selectedProduct] = useState(null);
-  const [cartQuantity, setCartQuantity] = useState(1)
+  const [cartQuantity, setCartQuantity] = useState(1);
-  const [expandedSeller, setExpandedSeller] = useState(false)
+  const [expandedSeller, setExpandedSeller] = useState(false);
 
   // Данные для демонстрации
   const scheduleData = Array.from({ length: 30 }, (_, i) => ({
     day: i + 1,
-    status: ['work', 'work', 'work', 'work', 'work', 'weekend', 'weekend'][i % 7],
+    status: ["work", "work", "work", "work", "work", "weekend", "weekend"][
-    hours: [8, 8, 8, 8, 8, 0, 0][i % 7]
+      i % 7
-  }))
+    ],
+    hours: [8, 8, 8, 8, 8, 0, 0][i % 7],
+  }));
 
   const products = [
     {
-      id: '1',
+      id: "1",
-      name: 'iPhone 15 Pro Max 256GB',
+      name: "iPhone 15 Pro Max 256GB",
-      article: 'APL-IP15PM-256',
+      article: "APL-IP15PM-256",
       price: 89990,
       oldPrice: 99990,
       quantity: 45,
-      category: 'Электроника',
+      category: "Электроника",
-      brand: 'Apple',
+      brand: "Apple",
       rating: 4.8,
       reviews: 1234,
-      image: '/placeholder-phone.jpg',
+      image: "/placeholder-phone.jpg",
-      seller: 'TechStore Moscow',
+      seller: "TechStore Moscow",
       isNew: true,
-      inStock: true
+      inStock: true,
     },
     {
-      id: '2',
+      id: "2",
-      name: 'Беспроводные наушники AirPods Pro',
+      name: "Беспроводные наушники AirPods Pro",
-      article: 'APL-APP-PRO',
+      article: "APL-APP-PRO",
       price: 24990,
       quantity: 23,
-      category: 'Аксессуары',
+      category: "Аксессуары",
-      brand: 'Apple',
+      brand: "Apple",
       rating: 4.6,
       reviews: 856,
-      image: '/placeholder-headphones.jpg',
+      image: "/placeholder-headphones.jpg",
-      seller: 'Audio Expert',
+      seller: "Audio Expert",
       isNew: false,
-      inStock: true
+      inStock: true,
     },
     {
-      id: '3',
+      id: "3",
-      name: 'Ноутбук MacBook Air M2',
+      name: "Ноутбук MacBook Air M2",
-      article: 'APL-MBA-M2',
+      article: "APL-MBA-M2",
       price: 0,
       quantity: 0,
-      category: 'Компьютеры',
+      category: "Компьютеры",
-      brand: 'Apple',
+      brand: "Apple",
       rating: 4.9,
       reviews: 445,
-      image: '/placeholder-laptop.jpg',
+      image: "/placeholder-laptop.jpg",
-      seller: 'Digital World',
+      seller: "Digital World",
       isNew: false,
-      inStock: false
+      inStock: false,
-    }
+    },
-  ]
+  ];
 
   // Данные для поставки фулфилмента
   const fulfillmentSupply = {
@@ -128,106 +131,129 @@ export function BusinessDemo() {
     logisticsPartnerId: "log1",
     status: "planned",
     totalValue: 2500000,
-  }
+  };
 
   const employees = [
-    { id: "emp1", firstName: "Иван", lastName: "Петров", position: "Менеджер склада" },
+    {
-    { id: "emp2", firstName: "Мария", lastName: "Сидорова", position: "Логист" }
+      id: "emp1",
-  ]
+      firstName: "Иван",
+      lastName: "Петров",
+      position: "Менеджер склада",
+    },
+    {
+      id: "emp2",
+      firstName: "Мария",
+      lastName: "Сидорова",
+      position: "Логист",
+    },
+  ];
 
   const logisticsPartners = [
     { id: "log1", name: "ТК Энергия", fullName: "ООО ТК Энергия" },
-    { id: "log2", name: "СДЭК", fullName: "ООО СДЭК" }
+    { id: "log2", name: "СДЭК", fullName: "ООО СДЭК" },
-  ]
+  ];
 
   const wholesalers = [
     {
-      id: '1',
+      id: "1",
-      name: 'ТехноОпт Москва',
+      name: "ТехноОпт Москва",
       fullName: 'ООО "Технологии Оптом"',
-      inn: '7735123456',
+      inn: "7735123456",
-      type: 'WHOLESALE',
+      type: "WHOLESALE",
-      avatar: '/placeholder-company.jpg',
+      avatar: "/placeholder-company.jpg",
       rating: 4.8,
       reviewsCount: 2345,
       productsCount: 15670,
       completedOrders: 8934,
-      responseTime: '2 часа',
+      responseTime: "2 часа",
-      categories: ['Электроника', 'Компьютеры', 'Аксессуары'],
+      categories: ["Электроника", "Компьютеры", "Аксессуары"],
-      location: 'Москва, Россия',
+      location: "Москва, Россия",
-      workingSince: '2018',
+      workingSince: "2018",
-      verifiedBadges: ['verified', 'premium', 'fast-delivery'],
+      verifiedBadges: ["verified", "premium", "fast-delivery"],
-      description: 'Крупнейший поставщик электроники и компьютерной техники в России',
+      description:
+        "Крупнейший поставщик электроники и компьютерной техники в России",
       specialOffers: 3,
-      minOrder: 50000
+      minOrder: 50000,
     },
     {
-      id: '2',
+      id: "2",
-      name: 'СтройБаза Регион',
+      name: "СтройБаза Регион",
-      fullName: 'ИП Строительные материалы',
+      fullName: "ИП Строительные материалы",
-      inn: '7735987654',
+      inn: "7735987654",
-      type: 'WHOLESALE',
+      type: "WHOLESALE",
-      avatar: '/placeholder-construction.jpg',
+      avatar: "/placeholder-construction.jpg",
       rating: 4.5,
       reviewsCount: 1876,
       productsCount: 8430,
       completedOrders: 5621,
-      responseTime: '4 часа',
+      responseTime: "4 часа",
-      categories: ['Стройматериалы', 'Инструменты', 'Сантехника'],
+      categories: ["Стройматериалы", "Инструменты", "Сантехника"],
-      location: 'Екатеринбург, Россия',
+      location: "Екатеринбург, Россия",
-      workingSince: '2015',
+      workingSince: "2015",
-      verifiedBadges: ['verified', 'eco-friendly'],
+      verifiedBadges: ["verified", "eco-friendly"],
-      description: 'Надежный поставщик строительных материалов по всей России',
+      description: "Надежный поставщик строительных материалов по всей России",
       specialOffers: 1,
-      minOrder: 30000
+      minOrder: 30000,
-    }
+    },
-  ]
+  ];
 
   const getStatusColor = (status: string) => {
     switch (status) {
-      case 'work': return 'bg-green-500'
+      case "work":
-      case 'weekend': return 'bg-gray-400'
+        return "bg-green-500";
-      case 'vacation': return 'bg-blue-500'
+      case "weekend":
-      case 'sick': return 'bg-yellow-500'
+        return "bg-gray-400";
-      case 'absent': return 'bg-red-500'
+      case "vacation":
-      default: return 'bg-gray-400'
+        return "bg-blue-500";
-    }
+      case "sick":
+        return "bg-yellow-500";
+      case "absent":
+        return "bg-red-500";
+      default:
+        return "bg-gray-400";
     }
+  };
 
   const getStatusText = (status: string) => {
     switch (status) {
-      case 'work': return 'Работа'
+      case "work":
-      case 'weekend': return 'Выходной'
+        return "Работа";
-      case 'vacation': return 'Отпуск'
+      case "weekend":
-      case 'sick': return 'Больничный'
+        return "Выходной";
-      case 'absent': return 'Прогул'
+      case "vacation":
-      default: return 'Неизвестно'
+        return "Отпуск";
-    }
+      case "sick":
+        return "Больничный";
+      case "absent":
+        return "Прогул";
+      default:
+        return "Неизвестно";
     }
+  };
 
   const formatPrice = (price: number) => {
-    return new Intl.NumberFormat('ru-RU', {
+    return new Intl.NumberFormat("ru-RU", {
-      style: 'currency',
+      style: "currency",
-      currency: 'RUB',
+      currency: "RUB",
-      minimumFractionDigits: 0
+      minimumFractionDigits: 0,
-    }).format(price)
+    }).format(price);
-  }
+  };
 
   const formatCurrency = (amount: number) => {
     return new Intl.NumberFormat("ru-RU", {
       style: "currency",
       currency: "RUB",
       minimumFractionDigits: 0,
-    }).format(amount)
+    }).format(amount);
-  }
+  };
 
   const formatDate = (dateString: string) => {
     return new Date(dateString).toLocaleDateString("ru-RU", {
       day: "2-digit",
       month: "2-digit",
       year: "numeric",
-    })
+    });
-  }
+  };
 
   const getStatusBadge = (status: string) => {
     const statusConfig = {
@@ -247,17 +273,17 @@ export function BusinessDemo() {
         color: "text-purple-300 border-purple-400/30",
         label: "Обрабатывается",
       },
-    }
+    };
 
     const config =
-      statusConfig[status as keyof typeof statusConfig] || statusConfig.planned
+      statusConfig[status as keyof typeof statusConfig] || statusConfig.planned;
 
     return (
       <Badge variant="outline" className={`glass-secondary ${config.color}`}>
         {config.label}
       </Badge>
-    )
+    );
-  }
+  };
 
   return (
     <div className="space-y-6">
@@ -272,11 +298,15 @@ export function BusinessDemo() {
             <div className="flex items-center space-x-3">
               <Avatar className="h-10 w-10">
                 <AvatarImage src="/placeholder-employee.jpg" />
-                <AvatarFallback className="bg-purple-600 text-white">ИИ</AvatarFallback>
+                <AvatarFallback className="bg-purple-600 text-white">
+                  ИИ
+                </AvatarFallback>
               </Avatar>
               <div>
                 <h4 className="text-white font-medium">Иванов Иван Иванович</h4>
-                <p className="text-white/60 text-sm">Менеджер по продажам • Март 2024</p>
+                <p className="text-white/60 text-sm">
+                  Менеджер по продажам • Март 2024
+                </p>
               </div>
             </div>
             <div className="text-right">
@@ -303,14 +333,22 @@ export function BusinessDemo() {
                   key={index}
                   className={`
                     relative p-3 rounded-lg border border-white/10 text-center transition-all hover:border-white/30
-                    ${day.status === 'work' ? 'bg-green-500/20' : ''}
+                    ${day.status === "work" ? "bg-green-500/20" : ""}
-                    ${day.status === 'weekend' ? 'bg-gray-500/20' : ''}
+                    ${day.status === "weekend" ? "bg-gray-500/20" : ""}
                   `}
                 >
-                  <div className="text-white text-sm font-medium">{day.day}</div>
+                  <div className="text-white text-sm font-medium">
-                  <div className={`w-2 h-2 rounded-full mx-auto mt-1 ${getStatusColor(day.status)}`}></div>
+                    {day.day}
+                  </div>
+                  <div
+                    className={`w-2 h-2 rounded-full mx-auto mt-1 ${getStatusColor(
+                      day.status
+                    )}`}
+                  ></div>
                   {day.hours > 0 && (
-                    <div className="text-white/60 text-xs mt-1">{day.hours}ч</div>
+                    <div className="text-white/60 text-xs mt-1">
+                      {day.hours}ч
+                    </div>
                   )}
                 </div>
               ))}
@@ -371,7 +409,10 @@ export function BusinessDemo() {
         <CardContent className="space-y-6">
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
             {products.map((product) => (
-              <div key={product.id} className="glass-card p-4 rounded-lg border border-white/10 group hover:border-white/30 transition-all">
+              <div
+                key={product.id}
+                className="glass-card p-4 rounded-lg border border-white/10 group hover:border-white/30 transition-all"
+              >
                 {/* Изображение товара */}
                 <div className="relative mb-3">
                   <div className="w-full h-40 bg-white/10 rounded-lg flex items-center justify-center">
@@ -381,19 +422,31 @@ export function BusinessDemo() {
                   {/* Бейджи */}
                   <div className="absolute top-2 left-2 flex flex-col gap-1">
                     {product.isNew && (
-                      <Badge className="bg-green-600 text-white text-xs">Новинка</Badge>
+                      <Badge className="bg-green-600 text-white text-xs">
+                        Новинка
+                      </Badge>
                     )}
                     {product.oldPrice && (
-                      <Badge className="bg-red-600 text-white text-xs">Скидка</Badge>
+                      <Badge className="bg-red-600 text-white text-xs">
+                        Скидка
+                      </Badge>
                     )}
                   </div>
 
                   {/* Кнопки действий */}
                   <div className="absolute top-2 right-2 flex flex-col gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
-                    <Button size="sm" variant="outline" className="bg-white/20 hover:bg-white/30 text-white border-white/30 h-8 w-8 p-0">
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      className="bg-white/20 hover:bg-white/30 text-white border-white/30 h-8 w-8 p-0"
+                    >
                       <Heart className="h-3 w-3" />
                     </Button>
-                    <Button size="sm" variant="outline" className="bg-white/20 hover:bg-white/30 text-white border-white/30 h-8 w-8 p-0">
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      className="bg-white/20 hover:bg-white/30 text-white border-white/30 h-8 w-8 p-0"
+                    >
                       <Eye className="h-3 w-3" />
                     </Button>
                   </div>
@@ -402,25 +455,39 @@ export function BusinessDemo() {
                 {/* Информация о товаре */}
                 <div className="space-y-2">
                   <div>
-                    <h4 className="text-white font-medium text-sm line-clamp-2">{product.name}</h4>
+                    <h4 className="text-white font-medium text-sm line-clamp-2">
-                    <p className="text-white/60 text-xs">Артикул: {product.article}</p>
+                      {product.name}
+                    </h4>
+                    <p className="text-white/60 text-xs">
+                      Артикул: {product.article}
+                    </p>
                   </div>
 
                   {/* Рейтинг и отзывы */}
                   <div className="flex items-center gap-2">
                     <div className="flex items-center gap-1">
                       <Star className="h-3 w-3 fill-yellow-400 text-yellow-400" />
-                      <span className="text-white/80 text-xs">{product.rating}</span>
+                      <span className="text-white/80 text-xs">
+                        {product.rating}
+                      </span>
                     </div>
-                    <span className="text-white/60 text-xs">({product.reviews} отзывов)</span>
+                    <span className="text-white/60 text-xs">
+                      ({product.reviews} отзывов)
+                    </span>
                   </div>
 
                   {/* Категория и бренд */}
                   <div className="flex flex-wrap gap-1">
-                    <Badge variant="outline" className="text-xs border-white/30 text-white/70">
+                    <Badge
+                      variant="outline"
+                      className="text-xs border-white/30 text-white/70"
+                    >
                       {product.category}
                     </Badge>
-                    <Badge variant="outline" className="text-xs border-white/30 text-white/70">
+                    <Badge
+                      variant="outline"
+                      className="text-xs border-white/30 text-white/70"
+                    >
                       {product.brand}
                     </Badge>
                   </div>
@@ -429,17 +496,25 @@ export function BusinessDemo() {
                   <div className="space-y-1">
                     {product.price > 0 ? (
                       <div className="flex items-center gap-2">
-                        <span className="text-white font-bold">{formatPrice(product.price)}</span>
+                        <span className="text-white font-bold">
+                          {formatPrice(product.price)}
+                        </span>
                         {product.oldPrice && (
-                          <span className="text-white/60 text-sm line-through">{formatPrice(product.oldPrice)}</span>
+                          <span className="text-white/60 text-sm line-through">
+                            {formatPrice(product.oldPrice)}
+                          </span>
                         )}
                       </div>
                     ) : (
-                      <span className="text-red-400 font-medium">Нет в наличии</span>
+                      <span className="text-red-400 font-medium">
+                        Нет в наличии
+                      </span>
                     )}
 
                     {product.inStock && product.quantity > 0 && (
-                      <p className="text-green-400 text-xs">В наличии: {product.quantity} шт.</p>
+                      <p className="text-green-400 text-xs">
+                        В наличии: {product.quantity} шт.
+                      </p>
                     )}
                   </div>
 
@@ -453,21 +528,37 @@ export function BusinessDemo() {
                     {product.inStock && product.price > 0 ? (
                       <>
                         <div className="flex items-center border border-white/30 rounded">
-                          <Button size="sm" variant="ghost" className="h-7 w-7 p-0 text-white hover:bg-white/20">
+                          <Button
+                            size="sm"
+                            variant="ghost"
+                            className="h-7 w-7 p-0 text-white hover:bg-white/20"
+                          >
                             <Minus className="h-3 w-3" />
                           </Button>
-                          <span className="px-2 text-white text-sm">{cartQuantity}</span>
+                          <span className="px-2 text-white text-sm">
-                          <Button size="sm" variant="ghost" className="h-7 w-7 p-0 text-white hover:bg-white/20">
+                            {cartQuantity}
+                          </span>
+                          <Button
+                            size="sm"
+                            variant="ghost"
+                            className="h-7 w-7 p-0 text-white hover:bg-white/20"
+                          >
                             <Plus className="h-3 w-3" />
                           </Button>
                         </div>
-                        <Button size="sm" className="flex-1 bg-purple-600 hover:bg-purple-700 text-white">
+                        <Button
-                          <ShoppingCart className="h-3 w-3 mr-1" />
+                          size="sm"
-                          В корзину
+                          className="flex-1 bg-purple-600 hover:bg-purple-700 text-white"
+                        >
+                          <ShoppingCart className="h-3 w-3 mr-1" />В корзину
                         </Button>
                       </>
                     ) : (
-                      <Button size="sm" disabled className="w-full bg-gray-600 text-white/50">
+                      <Button
+                        size="sm"
+                        disabled
+                        className="w-full bg-gray-600 text-white/50"
+                      >
                         Недоступно
                       </Button>
                     )}
@@ -482,7 +573,9 @@ export function BusinessDemo() {
       {/* Карточка поставки фулфилмента */}
       <Card className="glass-card border-white/10">
         <CardHeader>
-          <CardTitle className="text-white">Карточка поставки фулфилмента</CardTitle>
+          <CardTitle className="text-white">
+            Карточка поставки фулфилмента
+          </CardTitle>
         </CardHeader>
         <CardContent className="space-y-4">
           <Card className="glass-card p-4 hover:bg-white/10 transition-colors">
@@ -641,10 +734,10 @@ export function BusinessDemo() {
 
                   {/* Ответственный сотрудник */}
                   <div className="col-span-1">
-                    <p className="text-white/60 text-xs mb-1">
+                    <p className="text-white/60 text-xs mb-1">Ответственный</p>
-                      Ответственный
+                    <Select
-                    </p>
+                      defaultValue={fulfillmentSupply.responsibleEmployeeId}
-                    <Select defaultValue={fulfillmentSupply.responsibleEmployeeId}>
+                    >
                       <SelectTrigger className="h-8 glass-input bg-white/10 border-white/20 text-white hover:bg-white/15 focus:bg-white/15 focus:ring-1 focus:ring-purple-400/50 text-xs">
                         <SelectValue placeholder="Выберите" />
                       </SelectTrigger>
@@ -685,7 +778,9 @@ export function BusinessDemo() {
                           >
                             <div className="flex flex-col">
                               <span className="font-medium">
-                                {partner.name || partner.fullName || "Без названия"}
+                                {partner.name ||
+                                  partner.fullName ||
+                                  "Без названия"}
                               </span>
                               <span className="text-xs text-white/60">
                                 Логистический партнер
@@ -719,7 +814,10 @@ export function BusinessDemo() {
         <CardContent className="space-y-6">
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
             {wholesalers.map((wholesaler) => (
-              <div key={wholesaler.id} className="glass-card p-6 rounded-lg border border-white/10 hover:border-white/30 transition-all">
+              <div
+                key={wholesaler.id}
+                className="glass-card p-6 rounded-lg border border-white/10 hover:border-white/30 transition-all"
+              >
                 {/* Заголовок карточки */}
                 <div className="flex items-start gap-4 mb-4">
                   <Avatar className="h-16 w-16">
@@ -731,24 +829,36 @@ export function BusinessDemo() {
 
                   <div className="flex-1 min-w-0">
                     <div className="flex items-center gap-2 mb-1">
-                      <h4 className="text-white font-semibold text-lg truncate">{wholesaler.name}</h4>
+                      <h4 className="text-white font-semibold text-lg truncate">
-                      {wholesaler.verifiedBadges.includes('verified') && (
+                        {wholesaler.name}
-                        <Badge className="bg-green-600 text-white text-xs">Проверен</Badge>
+                      </h4>
+                      {wholesaler.verifiedBadges.includes("verified") && (
+                        <Badge className="bg-green-600 text-white text-xs">
+                          Проверен
+                        </Badge>
                       )}
-                      {wholesaler.verifiedBadges.includes('premium') && (
+                      {wholesaler.verifiedBadges.includes("premium") && (
-                        <Badge className="bg-yellow-600 text-white text-xs">Premium</Badge>
+                        <Badge className="bg-yellow-600 text-white text-xs">
+                          Premium
+                        </Badge>
                       )}
                     </div>
 
-                    <p className="text-white/70 text-sm mb-2">{wholesaler.fullName}</p>
+                    <p className="text-white/70 text-sm mb-2">
-                    <p className="text-white/60 text-xs">ИНН: {wholesaler.inn}</p>
+                      {wholesaler.fullName}
+                    </p>
+                    <p className="text-white/60 text-xs">
+                      ИНН: {wholesaler.inn}
+                    </p>
 
                     {/* Рейтинг и статистика */}
                     <div className="flex items-center gap-4 mt-2 text-sm">
                       <div className="flex items-center gap-1">
                         <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
                         <span className="text-white">{wholesaler.rating}</span>
-                        <span className="text-white/60">({wholesaler.reviewsCount})</span>
+                        <span className="text-white/60">
+                          ({wholesaler.reviewsCount})
+                        </span>
                       </div>
                       <div className="text-white/60">
                         {wholesaler.completedOrders} заказов
@@ -769,7 +879,9 @@ export function BusinessDemo() {
                       <Package className="h-4 w-4 text-purple-400" />
                       <span className="text-white/70 text-xs">Товаров</span>
                     </div>
-                    <div className="text-white font-bold">{wholesaler.productsCount.toLocaleString()}</div>
+                    <div className="text-white font-bold">
+                      {wholesaler.productsCount.toLocaleString()}
+                    </div>
                   </div>
 
                   <div className="bg-white/5 rounded-lg p-3">
@@ -777,7 +889,9 @@ export function BusinessDemo() {
                       <Clock className="h-4 w-4 text-green-400" />
                       <span className="text-white/70 text-xs">Ответ</span>
                     </div>
-                    <div className="text-white font-bold">{wholesaler.responseTime}</div>
+                    <div className="text-white font-bold">
+                      {wholesaler.responseTime}
+                    </div>
                   </div>
                 </div>
 
@@ -786,7 +900,11 @@ export function BusinessDemo() {
                   <p className="text-white/70 text-xs mb-2">Категории:</p>
                   <div className="flex flex-wrap gap-1">
                     {wholesaler.categories.map((category, index) => (
-                      <Badge key={index} variant="outline" className="text-xs border-white/30 text-white/70">
+                      <Badge
+                        key={index}
+                        variant="outline"
+                        className="text-xs border-white/30 text-white/70"
+                      >
                         {category}
                       </Badge>
                     ))}
@@ -827,10 +945,16 @@ export function BusinessDemo() {
                     <Eye className="h-4 w-4 mr-2" />
                     Смотреть товары
                   </Button>
-                  <Button variant="outline" className="bg-white/10 hover:bg-white/20 text-white border-white/30">
+                  <Button
+                    variant="outline"
+                    className="bg-white/10 hover:bg-white/20 text-white border-white/30"
+                  >
                     <Phone className="h-4 w-4" />
                   </Button>
-                  <Button variant="outline" className="bg-white/10 hover:bg-white/20 text-white border-white/30">
+                  <Button
+                    variant="outline"
+                    className="bg-white/10 hover:bg-white/20 text-white border-white/30"
+                  >
                     <Mail className="h-4 w-4" />
                   </Button>
                 </div>
@@ -839,6 +963,9 @@ export function BusinessDemo() {
           </div>
         </CardContent>
       </Card>
+
+      {/* Космически-галактические табели рабочего времени */}
+      <TimesheetDemo />
     </div>
-  )
+  );
 }

src/components/admin/ui-kit/timesheet-demo.tsx

@@ -0,0 +1,3751 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+
+interface CalendarDay {
+  day: number;
+  status: string;
+  hours: number;
+  overtime: number;
+  workType: string | null;
+  mood: string | null;
+  efficiency: number | null;
+  tasks: number;
+  breaks: number;
+}
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Progress } from "@/components/ui/progress";
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Clock,
+  Star,
+  Award,
+  ChevronLeft,
+  ChevronRight,
+  Settings,
+  Download,
+  Filter,
+  MoreHorizontal,
+  MapPin,
+  CheckCircle,
+  XCircle,
+  Coffee,
+  Home,
+  Plane,
+  Heart,
+  Zap,
+  Moon,
+  Activity,
+  Eye,
+  Plus,
+  X,
+} from "lucide-react";
+
+export function TimesheetDemo() {
+  const [selectedVariant, setSelectedVariant] = useState<
+    | "galaxy"
+    | "cosmic"
+    | "custom"
+    | "compact"
+    | "interactive"
+    | "multi-employee"
+  >("galaxy");
+  const [selectedEmployee, setSelectedEmployee] = useState("employee1");
+  const [selectedMonth, setSelectedMonth] = useState(new Date().getMonth());
+  const [selectedYear, setSelectedYear] = useState(new Date().getFullYear());
+  const [animatedStats, setAnimatedStats] = useState(false);
+  const [editableCalendarData, setEditableCalendarData] = useState<
+    CalendarDay[]
+  >([]);
+  const [calendarData, setCalendarData] = useState<CalendarDay[]>([]);
+
+  // Данные сотрудников
+  const employees = [
+    {
+      id: "employee1",
+      name: "Алексей Космонавтов",
+      position: "Senior Frontend Developer",
+      avatar: "/placeholder-employee-1.jpg",
+      department: "Отдел разработки",
+      level: "Senior",
+      experience: "5 лет",
+      efficiency: 95,
+      totalHours: 176,
+      workDays: 22,
+      overtime: 8,
+      projects: 3,
+    },
+    {
+      id: "employee2",
+      name: "Мария Звездочетова",
+      position: "UX/UI Designer",
+      avatar: "/placeholder-employee-2.jpg",
+      department: "Дизайн-студия",
+      level: "Middle",
+      experience: "3 года",
+      efficiency: 88,
+      totalHours: 168,
+      workDays: 21,
+      overtime: 4,
+      projects: 5,
+    },
+    {
+      id: "employee3",
+      name: "Иван Галактический",
+      position: "DevOps Engineer",
+      avatar: "/placeholder-employee-3.jpg",
+      department: "Инфраструктура",
+      level: "Lead",
+      experience: "7 лет",
+      efficiency: 92,
+      totalHours: 184,
+      workDays: 23,
+      overtime: 12,
+      projects: 2,
+    },
+  ];
+  
+  // Состояние для универсального табеля
+  const [employeesList, setEmployeesList] = useState(employees);
+  const [showAddForm, setShowAddForm] = useState(false);
+  const [newEmployee, setNewEmployee] = useState({
+    name: '',
+    position: '',
+    department: '',
+    level: 'Junior'
+  });
+
+  // Генерируем данные календаря для всех сотрудников
+  const generateEmployeeCalendarData = () => {
+    const daysInMonth = new Date(selectedYear, selectedMonth + 1, 0).getDate();
+    const employeeData: { [key: string]: CalendarDay[] } = {};
+
+    employeesList.forEach(employee => {
+      employeeData[employee.id] = Array.from({ length: daysInMonth }, (_, i) => {
+        const dayOfWeek = (new Date(selectedYear, selectedMonth, 1).getDay() === 0 ? 6 : new Date(selectedYear, selectedMonth, 1).getDay() - 1 + i) % 7;
+        const isWeekend = dayOfWeek >= 5;
+
+        return {
+          day: i + 1,
+          status: isWeekend
+            ? "weekend"
+            : Math.random() > 0.95
+            ? "sick"
+            : Math.random() > 0.9
+            ? "vacation"
+            : "work",
+          hours: isWeekend ? 0 : Math.floor(Math.random() * 3) + 7,
+          overtime: Math.random() > 0.8 ? Math.floor(Math.random() * 3) + 1 : 0,
+          workType: isWeekend ? null : ["office", "remote", "hybrid"][Math.floor(Math.random() * 3)],
+          mood: isWeekend ? null : ["excellent", "good", "normal", "tired"][Math.floor(Math.random() * 4)],
+          efficiency: isWeekend ? null : Math.floor(Math.random() * 30) + 70,
+          tasks: isWeekend ? 0 : Math.floor(Math.random() * 8) + 2,
+          breaks: isWeekend ? 0 : Math.floor(Math.random() * 3) + 1,
+        };
+      });
+    });
+
+    return employeeData;
+  };
+
+  const [allEmployeesData, setAllEmployeesData] = useState(generateEmployeeCalendarData());
+
+  // Добавление нового сотрудника
+  const handleAddEmployee = () => {
+    if (newEmployee.name && newEmployee.position) {
+      const newEmp = {
+        id: `employee${Date.now()}`,
+        name: newEmployee.name,
+        position: newEmployee.position,
+        department: newEmployee.department,
+        level: newEmployee.level,
+        avatar: `/placeholder-employee-${employeesList.length + 1}.jpg`,
+        experience: "Новый сотрудник",
+        efficiency: Math.floor(Math.random() * 20) + 80,
+        totalHours: 0,
+        workDays: 0,
+        overtime: 0,
+        projects: Math.floor(Math.random() * 5) + 1,
+      };
+      setEmployeesList([...employeesList, newEmp]);
+      setNewEmployee({ name: '', position: '', department: '', level: 'Junior' });
+      setShowAddForm(false);
+    }
+  };
+
+  // Удаление сотрудника
+  const handleRemoveEmployee = (employeeId: string) => {
+    setEmployeesList(employeesList.filter(emp => emp.id !== employeeId));
+  };
+
+  // Получение цвета для сотрудника
+  const getEmployeeColor = (index: number) => {
+    const colors = [
+      'from-cyan-500 to-blue-500',
+      'from-pink-500 to-purple-500', 
+      'from-emerald-500 to-teal-500',
+      'from-orange-500 to-red-500',
+      'from-yellow-500 to-amber-500',
+      'from-indigo-500 to-purple-500',
+      'from-green-500 to-lime-500',
+      'from-rose-500 to-pink-500'
+    ];
+    return colors[index % colors.length];
+  };
+
+  // Получение статуса дня для конкретного сотрудника
+  const getDayStatus = (employeeId: string, dayIndex: number) => {
+    return allEmployeesData[employeeId]?.[dayIndex] || null;
+  };
+
+  // Подсчет работающих сотрудников в конкретный день
+  const getWorkingEmployeesCount = (dayIndex: number) => {
+    return employeesList.filter(emp => {
+      const dayData = getDayStatus(emp.id, dayIndex);
+      return dayData?.status === 'work';
+    }).length;
+  };
+
+  // Анимация статистики
+  useEffect(() => {
+    const timer = setTimeout(() => setAnimatedStats(true), 500);
+    return () => clearTimeout(timer);
+  }, []);
+
+  // Обновляем данные при изменении списка сотрудников или месяца
+  useEffect(() => {
+    setAllEmployeesData(generateEmployeeCalendarData());
+  }, [employeesList, selectedMonth, selectedYear]);
+
+  // Инициализация данных календаря для интерактивного режима
+  useEffect(() => {
+    if (editableCalendarData.length === 0 && calendarData.length > 0) {
+      setEditableCalendarData([...calendarData]);
+    }
+  }, [calendarData, editableCalendarData.length]);
+
+  // Подсчет статистики на основе редактируемых данных
+  const interactiveStats = React.useMemo(() => {
+    if (editableCalendarData.length === 0) {
+      return {
+        totalHours: 0,
+        workDays: 0,
+        vacation: 0,
+        sick: 0,
+        overtime: 0,
+        avgEfficiency: 0,
+      };
+    }
+
+    const workDays = editableCalendarData.filter(
+      (day) => day.status === "work"
+    ).length;
+    const totalHours = editableCalendarData.reduce(
+      (sum, day) => sum + day.hours,
+      0
+    );
+    const vacation = editableCalendarData.filter(
+      (day) => day.status === "vacation"
+    ).length;
+    const sick = editableCalendarData.filter(
+      (day) => day.status === "sick"
+    ).length;
+    const overtime = editableCalendarData.reduce(
+      (sum, day) => sum + day.overtime,
+      0
+    );
+    const avgEfficiency =
+      workDays > 0
+        ? Math.round(
+            editableCalendarData.reduce(
+              (sum, day) => sum + (day.efficiency || 0),
+              0
+            ) / workDays
+          )
+        : 0;
+
+    return {
+      totalHours,
+      workDays,
+      vacation,
+      sick,
+      overtime,
+      avgEfficiency,
+    };
+  }, [editableCalendarData]);
+
+  // Функция для изменения статуса дня
+  const toggleDayStatus = (dayIndex: number) => {
+    const statuses = ["work", "weekend", "vacation", "sick", "absent"];
+    const currentDay = editableCalendarData[dayIndex];
+    if (!currentDay) return;
+
+    const currentStatusIndex = statuses.indexOf(currentDay.status);
+    const nextStatusIndex = (currentStatusIndex + 1) % statuses.length;
+    const newStatus = statuses[nextStatusIndex];
+
+    const updatedData = [...editableCalendarData];
+    updatedData[dayIndex] = {
+      ...currentDay,
+      status: newStatus,
+      hours: newStatus === "work" ? 8 : 0,
+      overtime: newStatus === "work" ? Math.floor(Math.random() * 3) : 0,
+    };
+
+    setEditableCalendarData(updatedData);
+  };
+
+  const currentEmployee =
+    employees.find((emp) => emp.id === selectedEmployee) || employees[0];
+
+  // Обновление данных при изменении месяца/года
+  useEffect(() => {
+    const generateData = () => {
+      const daysInMonth = new Date(
+        selectedYear,
+        selectedMonth + 1,
+        0
+      ).getDate();
+      const firstDay = new Date(selectedYear, selectedMonth, 1).getDay();
+      const adjustedFirstDay = firstDay === 0 ? 6 : firstDay - 1;
+
+      const workTypes = ["office", "remote", "hybrid"];
+      const moods = ["excellent", "good", "normal", "tired"];
+
+      return Array.from({ length: daysInMonth }, (_, i) => {
+        const dayOfWeek = (adjustedFirstDay + i) % 7;
+        const isWeekend = dayOfWeek >= 5;
+
+        return {
+          day: i + 1,
+          status: isWeekend
+            ? "weekend"
+            : Math.random() > 0.95
+            ? "sick"
+            : Math.random() > 0.9
+            ? "vacation"
+            : "work",
+          hours: isWeekend ? 0 : Math.floor(Math.random() * 3) + 7,
+          overtime: Math.random() > 0.8 ? Math.floor(Math.random() * 3) + 1 : 0,
+          workType: isWeekend
+            ? null
+            : workTypes[Math.floor(Math.random() * workTypes.length)],
+          mood: isWeekend
+            ? null
+            : moods[Math.floor(Math.random() * moods.length)],
+          efficiency: isWeekend ? null : Math.floor(Math.random() * 30) + 70,
+          tasks: isWeekend ? 0 : Math.floor(Math.random() * 8) + 2,
+          breaks: isWeekend ? 0 : Math.floor(Math.random() * 3) + 1,
+        };
+      });
+    };
+
+    setCalendarData(generateData());
+    setAnimatedStats(false);
+    const timer = setTimeout(() => setAnimatedStats(true), 300);
+    return () => clearTimeout(timer);
+  }, [selectedMonth, selectedYear]);
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case "work":
+        return "bg-gradient-to-r from-emerald-500 to-green-500";
+      case "weekend":
+        return "bg-gradient-to-r from-slate-500 to-gray-500";
+      case "vacation":
+        return "bg-gradient-to-r from-blue-500 to-cyan-500";
+      case "sick":
+        return "bg-gradient-to-r from-amber-500 to-orange-500";
+      case "absent":
+        return "bg-gradient-to-r from-red-500 to-rose-500";
+      default:
+        return "bg-gradient-to-r from-slate-500 to-gray-500";
+    }
+  };
+
+  const getWorkTypeIcon = (workType: string | null) => {
+    switch (workType) {
+      case "office":
+        return <MapPin className="h-3 w-3" />;
+      case "remote":
+        return <Home className="h-3 w-3" />;
+      case "hybrid":
+        return <Zap className="h-3 w-3" />;
+      default:
+        return null;
+    }
+  };
+
+  const getMoodIcon = (mood: string | null) => {
+    switch (mood) {
+      case "excellent":
+        return <Star className="h-3 w-3 text-yellow-400" />;
+      case "good":
+        return <CheckCircle className="h-3 w-3 text-green-400" />;
+      case "normal":
+        return <Clock className="h-3 w-3 text-blue-400" />;
+      case "tired":
+        return <Coffee className="h-3 w-3 text-orange-400" />;
+      default:
+        return null;
+    }
+  };
+
+  const monthNames = [
+    "Январь",
+    "Февраль",
+    "Март",
+    "Апрель",
+    "Май",
+    "Июнь",
+    "Июль",
+    "Август",
+    "Сентябрь",
+    "Октябрь",
+    "Ноябрь",
+    "Декабрь",
+  ];
+
+  const dayNames = ["Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Вс"];
+
+  // Статистика
+  const stats = {
+    totalHours: calendarData.reduce((sum, day) => sum + day.hours, 0),
+    workDays: calendarData.filter((day) => day.status === "work").length,
+    weekends: calendarData.filter((day) => day.status === "weekend").length,
+    vacation: calendarData.filter((day) => day.status === "vacation").length,
+    sick: calendarData.filter((day) => day.status === "sick").length,
+    overtime: calendarData.reduce((sum, day) => sum + day.overtime, 0),
+    avgEfficiency: Math.round(
+      calendarData
+        .filter((day) => day.efficiency)
+        .reduce(
+          (sum, day, _, arr) => sum + (day.efficiency || 0) / arr.length,
+          0
+        )
+    ),
+    totalTasks: calendarData.reduce((sum, day) => sum + day.tasks, 0),
+  };
+
+  const renderGalaxyVariant = () => (
+    <Card className="glass-card border-white/10 overflow-hidden relative">
+      {/* Космический фон с анимацией */}
+      <div className="absolute inset-0 bg-gradient-to-br from-purple-900/20 via-blue-900/20 to-indigo-900/20">
+        <div
+          className="absolute inset-0 opacity-50"
+          style={{
+            backgroundImage:
+              'url(\'data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="0.05"%3E%3Ccircle cx="7" cy="7" r="1"/%3E%3Ccircle cx="27" cy="27" r="1"/%3E%3Ccircle cx="47" cy="47" r="1"/%3E%3Ccircle cx="17" cy="37" r="1"/%3E%3Ccircle cx="37" cy="17" r="1"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E\')',
+          }}
+        ></div>
+
+        {/* Плавающие частицы */}
+        <div className="absolute top-10 left-10 w-2 h-2 bg-purple-400/30 rounded-full animate-pulse"></div>
+        <div className="absolute top-20 right-20 w-1 h-1 bg-blue-400/40 rounded-full animate-pulse delay-1000"></div>
+        <div className="absolute bottom-20 left-20 w-1.5 h-1.5 bg-cyan-400/30 rounded-full animate-pulse delay-2000"></div>
+        <div className="absolute bottom-10 right-10 w-1 h-1 bg-purple-300/40 rounded-full animate-pulse delay-500"></div>
+      </div>
+
+      <CardHeader className="relative z-10">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center space-x-4">
+            <div className="relative">
+              <Avatar className="h-16 w-16 ring-2 ring-purple-500/50 ring-offset-2 ring-offset-gray-900">
+                <AvatarImage src={currentEmployee.avatar} />
+                <AvatarFallback className="bg-gradient-to-br from-purple-600 to-blue-600 text-white text-lg font-bold">
+                  {currentEmployee.name
+                    .split(" ")
+                    .map((n) => n[0])
+                    .join("")}
+                </AvatarFallback>
+              </Avatar>
+              <div className="absolute -top-1 -right-1 w-5 h-5 bg-gradient-to-r from-green-400 to-emerald-500 rounded-full flex items-center justify-center">
+                <div className="w-2 h-2 bg-white rounded-full"></div>
+              </div>
+            </div>
+
+            <div>
+              <h3 className="text-xl font-bold text-white mb-1">
+                {currentEmployee.name}
+              </h3>
+              <p className="text-purple-300 text-sm mb-1">
+                {currentEmployee.position}
+              </p>
+              <div className="flex items-center space-x-3 text-xs text-white/70">
+                <span>{currentEmployee.department}</span>
+                <span>•</span>
+                <Badge className="bg-purple-600/30 text-purple-200 border-purple-500/30">
+                  {currentEmployee.level}
+                </Badge>
+                <span>•</span>
+                <span>{currentEmployee.experience}</span>
+              </div>
+            </div>
+          </div>
+
+          <div className="text-right">
+            <div className="text-3xl font-bold text-white mb-1 bg-gradient-to-r from-purple-400 to-blue-400 bg-clip-text text-transparent">
+              {animatedStats ? stats.totalHours : 0}ч
+            </div>
+            <p className="text-purple-300 text-sm">
+              Отработано в {monthNames[selectedMonth].toLowerCase()}
+            </p>
+            <div className="flex items-center justify-end mt-2">
+              <div className="flex items-center space-x-1">
+                <Star className="h-4 w-4 text-yellow-400 fill-current" />
+                <span className="text-white font-medium">
+                  {currentEmployee.efficiency}%
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Навигация по месяцам */}
+        <div className="flex items-center justify-between mt-6">
+          <div className="flex items-center space-x-4">
+            <Select
+              value={selectedEmployee}
+              onValueChange={setSelectedEmployee}
+            >
+              <SelectTrigger className="w-64 glass-input bg-white/10 border-white/20 text-white hover:bg-white/15">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent className="bg-gray-900/95 backdrop-blur border-white/20 text-white">
+                {employees.map((emp) => (
+                  <SelectItem
+                    key={emp.id}
+                    value={emp.id}
+                    className="text-white hover:bg-white/10"
+                  >
+                    <div className="flex items-center space-x-3">
+                      <Avatar className="h-6 w-6">
+                        <AvatarImage src={emp.avatar} />
+                        <AvatarFallback className="bg-purple-600 text-white text-xs">
+                          {emp.name
+                            .split(" ")
+                            .map((n) => n[0])
+                            .join("")}
+                        </AvatarFallback>
+                      </Avatar>
+                      <div>
+                        <div className="font-medium">{emp.name}</div>
+                        <div className="text-xs text-white/60">
+                          {emp.position}
+                        </div>
+                      </div>
+                    </div>
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="flex items-center space-x-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => {
+                if (selectedMonth === 0) {
+                  setSelectedMonth(11);
+                  setSelectedYear(selectedYear - 1);
+                } else {
+                  setSelectedMonth(selectedMonth - 1);
+                }
+              }}
+              className="text-white hover:bg-white/10"
+            >
+              <ChevronLeft className="h-4 w-4" />
+            </Button>
+
+            <div className="text-white font-semibold text-lg min-w-[140px] text-center">
+              {monthNames[selectedMonth]} {selectedYear}
+            </div>
+
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => {
+                if (selectedMonth === 11) {
+                  setSelectedMonth(0);
+                  setSelectedYear(selectedYear + 1);
+                } else {
+                  setSelectedMonth(selectedMonth + 1);
+                }
+              }}
+              className="text-white hover:bg-white/10"
+            >
+              <ChevronRight className="h-4 w-4" />
+            </Button>
+          </div>
+
+          <div className="flex items-center space-x-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="text-white hover:bg-white/10"
+            >
+              <Download className="h-4 w-4 mr-2" />
+              Экспорт
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="text-white hover:bg-white/10"
+            >
+              <Settings className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+      </CardHeader>
+
+      <CardContent className="space-y-6 relative z-10">
+        {/* Статистические карты */}
+        <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4 mb-6">
+          <div className="glass-card p-4 rounded-xl border border-purple-500/30 bg-gradient-to-br from-purple-500/10 to-blue-500/10 hover:from-purple-500/20 hover:to-blue-500/20 transition-all duration-300">
+            <div className="flex items-center justify-between mb-2">
+              <Clock className="h-5 w-5 text-purple-400" />
+              <div className="text-right">
+                <div className="text-white text-lg font-bold">
+                  {animatedStats ? stats.totalHours : 0}
+                </div>
+                <div className="text-purple-300 text-xs">Часов</div>
+              </div>
+            </div>
+            <Progress
+              value={animatedStats ? (stats.totalHours / 200) * 100 : 0}
+              className="h-2 bg-white/10"
+            />
+          </div>
+
+          <div className="glass-card p-4 rounded-xl border border-green-500/30 bg-gradient-to-br from-green-500/10 to-emerald-500/10 hover:from-green-500/20 hover:to-emerald-500/20 transition-all duration-300">
+            <div className="flex items-center justify-between mb-2">
+              <CheckCircle className="h-5 w-5 text-green-400" />
+              <div className="text-right">
+                <div className="text-white text-lg font-bold">
+                  {animatedStats ? stats.workDays : 0}
+                </div>
+                <div className="text-green-300 text-xs">Рабочих дней</div>
+              </div>
+            </div>
+            <Progress
+              value={animatedStats ? (stats.workDays / 25) * 100 : 0}
+              className="h-2 bg-white/10"
+            />
+          </div>
+
+          <div className="glass-card p-4 rounded-xl border border-blue-500/30 bg-gradient-to-br from-blue-500/10 to-cyan-500/10 hover:from-blue-500/20 hover:to-cyan-500/20 transition-all duration-300">
+            <div className="flex items-center justify-between mb-2">
+              <Plane className="h-5 w-5 text-blue-400" />
+              <div className="text-right">
+                <div className="text-white text-lg font-bold">
+                  {animatedStats ? stats.vacation : 0}
+                </div>
+                <div className="text-blue-300 text-xs">Отпуск</div>
+              </div>
+            </div>
+            <Progress
+              value={animatedStats ? (stats.vacation / 5) * 100 : 0}
+              className="h-2 bg-white/10"
+            />
+          </div>
+
+          <div className="glass-card p-4 rounded-xl border border-orange-500/30 bg-gradient-to-br from-orange-500/10 to-yellow-500/10 hover:from-orange-500/20 hover:to-yellow-500/20 transition-all duration-300">
+            <div className="flex items-center justify-between mb-2">
+              <Heart className="h-5 w-5 text-orange-400" />
+              <div className="text-right">
+                <div className="text-white text-lg font-bold">
+                  {animatedStats ? stats.sick : 0}
+                </div>
+                <div className="text-orange-300 text-xs">Больничный</div>
+              </div>
+            </div>
+            <Progress
+              value={animatedStats ? (stats.sick / 3) * 100 : 0}
+              className="h-2 bg-white/10"
+            />
+          </div>
+
+          <div className="glass-card p-4 rounded-xl border border-yellow-500/30 bg-gradient-to-br from-yellow-500/10 to-amber-500/10 hover:from-yellow-500/20 hover:to-amber-500/20 transition-all duration-300">
+            <div className="flex items-center justify-between mb-2">
+              <Zap className="h-5 w-5 text-yellow-400" />
+              <div className="text-right">
+                <div className="text-white text-lg font-bold">
+                  {animatedStats ? stats.overtime : 0}
+                </div>
+                <div className="text-yellow-300 text-xs">Переработка</div>
+              </div>
+            </div>
+            <Progress
+              value={animatedStats ? (stats.overtime / 20) * 100 : 0}
+              className="h-2 bg-white/10"
+            />
+          </div>
+
+          <div className="glass-card p-4 rounded-xl border border-pink-500/30 bg-gradient-to-br from-pink-500/10 to-rose-500/10 hover:from-pink-500/20 hover:to-rose-500/20 transition-all duration-300">
+            <div className="flex items-center justify-between mb-2">
+              <Activity className="h-5 w-5 text-pink-400" />
+              <div className="text-right">
+                <div className="text-white text-lg font-bold">
+                  {animatedStats ? stats.avgEfficiency : 0}%
+                </div>
+                <div className="text-pink-300 text-xs">Эффективность</div>
+              </div>
+            </div>
+            <Progress
+              value={animatedStats ? stats.avgEfficiency : 0}
+              className="h-2 bg-white/10"
+            />
+          </div>
+        </div>
+
+        {/* Календарь */}
+        <div className="space-y-4">
+          {/* Заголовки дней недели */}
+          <div className="grid grid-cols-7 gap-2 text-center">
+            {dayNames.map((day) => (
+              <div key={day} className="text-white/70 font-medium text-sm py-2">
+                {day}
+              </div>
+            ))}
+          </div>
+
+          {/* Дни месяца */}
+          <div className="grid grid-cols-7 gap-2">
+            {/* Пустые ячейки для начала месяца */}
+            {Array.from({
+              length:
+                new Date(selectedYear, selectedMonth, 1).getDay() === 0
+                  ? 6
+                  : new Date(selectedYear, selectedMonth, 1).getDay() - 1,
+            }).map((_, index) => (
+              <div key={`empty-${index}`} className="aspect-square"></div>
+            ))}
+
+            {/* Дни месяца */}
+            {calendarData.map((day, index) => (
+              <div
+                key={index}
+                className={`
+                  aspect-square p-2 rounded-xl border transition-all duration-300 hover:scale-105 cursor-pointer group
+                  ${
+                    day.status === "work"
+                      ? "border-green-500/30 bg-gradient-to-br from-green-500/10 to-emerald-500/10 hover:from-green-500/20 hover:to-emerald-500/20"
+                      : ""
+                  }
+                  ${
+                    day.status === "weekend"
+                      ? "border-gray-500/30 bg-gradient-to-br from-gray-500/10 to-slate-500/10"
+                      : ""
+                  }
+                  ${
+                    day.status === "vacation"
+                      ? "border-blue-500/30 bg-gradient-to-br from-blue-500/10 to-cyan-500/10"
+                      : ""
+                  }
+                  ${
+                    day.status === "sick"
+                      ? "border-orange-500/30 bg-gradient-to-br from-orange-500/10 to-yellow-500/10"
+                      : ""
+                  }
+                  ${
+                    day.status === "absent"
+                      ? "border-red-500/30 bg-gradient-to-br from-red-500/10 to-rose-500/10"
+                      : ""
+                  }
+                `}
+              >
+                <div className="h-full flex flex-col justify-between">
+                  <div className="flex items-center justify-between">
+                    <span className="text-white font-medium text-sm">
+                      {day.day}
+                    </span>
+                    {day.workType && (
+                      <div className="text-white/60">
+                        {getWorkTypeIcon(day.workType)}
+                      </div>
+                    )}
+                  </div>
+
+                  {day.status === "work" && (
+                    <div className="space-y-1">
+                      <div className="flex items-center justify-between">
+                        <span className="text-white/80 text-xs">
+                          {day.hours}ч
+                        </span>
+                        {day.overtime > 0 && (
+                          <span className="text-yellow-400 text-xs">
+                            +{day.overtime}
+                          </span>
+                        )}
+                      </div>
+
+                      <div className="flex items-center justify-between">
+                        {getMoodIcon(day.mood)}
+                        {day.efficiency && (
+                          <span className="text-white/60 text-xs">
+                            {day.efficiency}%
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                  )}
+
+                  {day.status !== "work" && day.status !== "weekend" && (
+                    <div className="flex justify-center">
+                      <div
+                        className={`w-2 h-2 rounded-full ${getStatusColor(
+                          day.status
+                        )}`}
+                      ></div>
+                    </div>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Легенда */}
+        <div className="flex flex-wrap gap-4 text-sm justify-center">
+          <div className="flex items-center gap-2 bg-white/5 px-3 py-2 rounded-lg">
+            <div className="w-3 h-3 rounded-full bg-gradient-to-r from-emerald-500 to-green-500"></div>
+            <span className="text-white/70">Работа</span>
+          </div>
+          <div className="flex items-center gap-2 bg-white/5 px-3 py-2 rounded-lg">
+            <div className="w-3 h-3 rounded-full bg-gradient-to-r from-slate-500 to-gray-500"></div>
+            <span className="text-white/70">Выходной</span>
+          </div>
+          <div className="flex items-center gap-2 bg-white/5 px-3 py-2 rounded-lg">
+            <div className="w-3 h-3 rounded-full bg-gradient-to-r from-blue-500 to-cyan-500"></div>
+            <span className="text-white/70">Отпуск</span>
+          </div>
+          <div className="flex items-center gap-2 bg-white/5 px-3 py-2 rounded-lg">
+            <div className="w-3 h-3 rounded-full bg-gradient-to-r from-amber-500 to-orange-500"></div>
+            <span className="text-white/70">Больничный</span>
+          </div>
+          <div className="flex items-center gap-2 bg-white/5 px-3 py-2 rounded-lg">
+            <div className="w-3 h-3 rounded-full bg-gradient-to-r from-red-500 to-rose-500"></div>
+            <span className="text-white/70">Прогул</span>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+
+  const renderCosmicVariant = () => (
+    <Card className="glass-card border-white/10 overflow-hidden relative">
+      {/* Космический фон с эффектом туманности */}
+      <div className="absolute inset-0 bg-gradient-to-br from-indigo-900/30 via-purple-900/30 to-pink-900/30">
+        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-purple-600/10 via-blue-600/5 to-transparent"></div>
+        <div
+          className="absolute inset-0 bg-[conic-gradient(from_0deg_at_50%_50%,_var(--tw-gradient-stops))] from-transparent via-purple-500/5 to-transparent animate-spin"
+          style={{ animationDuration: "20s" }}
+        ></div>
+
+        {/* Звездное поле */}
+        <div className="absolute top-5 left-5 w-1 h-1 bg-white/60 rounded-full animate-pulse"></div>
+        <div className="absolute top-12 right-12 w-0.5 h-0.5 bg-blue-300/70 rounded-full animate-pulse delay-300"></div>
+        <div className="absolute bottom-20 left-8 w-1.5 h-1.5 bg-purple-300/50 rounded-full animate-pulse delay-700"></div>
+        <div className="absolute bottom-8 right-20 w-1 h-1 bg-pink-300/60 rounded-full animate-pulse delay-1000"></div>
+        <div className="absolute top-1/3 left-1/4 w-0.5 h-0.5 bg-cyan-300/80 rounded-full animate-pulse delay-500"></div>
+        <div className="absolute top-2/3 right-1/3 w-1 h-1 bg-yellow-300/50 rounded-full animate-pulse delay-1200"></div>
+      </div>
+
+      <CardHeader className="relative z-10">
+        <div className="flex items-center justify-between mb-6">
+          <div className="flex items-center space-x-6">
+            <div className="relative">
+              <div className="absolute inset-0 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full animate-pulse opacity-50"></div>
+              <Avatar className="h-20 w-20 relative z-10 ring-4 ring-gradient-to-r from-purple-400 to-pink-400 ring-offset-4 ring-offset-gray-900">
+                <AvatarImage src={currentEmployee.avatar} />
+                <AvatarFallback className="bg-gradient-to-br from-purple-600 via-indigo-600 to-pink-600 text-white text-xl font-bold">
+                  {currentEmployee.name
+                    .split(" ")
+                    .map((n) => n[0])
+                    .join("")}
+                </AvatarFallback>
+              </Avatar>
+
+              {/* Орбитальные элементы */}
+              <div className="absolute -top-2 -right-2 w-6 h-6 bg-gradient-to-r from-green-400 to-emerald-500 rounded-full flex items-center justify-center animate-bounce">
+                <CheckCircle className="h-3 w-3 text-white" />
+              </div>
+
+              <div className="absolute -bottom-1 -left-1 w-4 h-4 bg-gradient-to-r from-yellow-400 to-orange-500 rounded-full flex items-center justify-center">
+                <Star className="h-2 w-2 text-white fill-current" />
+              </div>
+            </div>
+
+            <div>
+              <h3 className="text-2xl font-bold bg-gradient-to-r from-white via-purple-200 to-pink-200 bg-clip-text text-transparent mb-2">
+                {currentEmployee.name}
+              </h3>
+              <p className="text-purple-300 text-base mb-2 font-medium">
+                {currentEmployee.position}
+              </p>
+              <div className="flex items-center space-x-4 text-sm">
+                <Badge className="bg-gradient-to-r from-purple-600 to-indigo-600 text-white border-none">
+                  {currentEmployee.department}
+                </Badge>
+                <Badge className="bg-gradient-to-r from-pink-600 to-rose-600 text-white border-none">
+                  {currentEmployee.level}
+                </Badge>
+                <span className="text-white/70">
+                  {currentEmployee.experience} опыта
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <div className="text-right space-y-2">
+            <div className="text-4xl font-bold bg-gradient-to-r from-purple-400 via-pink-400 to-cyan-400 bg-clip-text text-transparent">
+              {animatedStats ? stats.totalHours : 0}
+            </div>
+            <p className="text-purple-300 font-medium">
+              часов в {monthNames[selectedMonth].toLowerCase()}
+            </p>
+
+            <div className="flex items-center justify-end space-x-4 mt-3">
+              <div className="flex items-center space-x-2 bg-white/10 rounded-full px-3 py-1">
+                <Activity className="h-4 w-4 text-cyan-400" />
+                <span className="text-white font-bold">
+                  {currentEmployee.efficiency}%
+                </span>
+              </div>
+              <div className="flex items-center space-x-2 bg-white/10 rounded-full px-3 py-1">
+                <Award className="h-4 w-4 text-yellow-400" />
+                <span className="text-white font-bold">
+                  {currentEmployee.projects}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Панель управления */}
+        <div className="flex items-center justify-between bg-white/5 rounded-2xl p-4 backdrop-blur-sm border border-white/10">
+          <div className="flex items-center space-x-4">
+            <Select
+              value={selectedEmployee}
+              onValueChange={setSelectedEmployee}
+            >
+              <SelectTrigger className="w-72 glass-input bg-white/10 border-white/20 text-white hover:bg-white/15 rounded-xl">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent className="bg-gray-900/95 backdrop-blur border-white/20 text-white rounded-xl">
+                {employees.map((emp) => (
+                  <SelectItem
+                    key={emp.id}
+                    value={emp.id}
+                    className="text-white hover:bg-white/10 rounded-lg"
+                  >
+                    <div className="flex items-center space-x-3">
+                      <Avatar className="h-8 w-8">
+                        <AvatarImage src={emp.avatar} />
+                        <AvatarFallback className="bg-gradient-to-br from-purple-600 to-pink-600 text-white text-xs">
+                          {emp.name
+                            .split(" ")
+                            .map((n) => n[0])
+                            .join("")}
+                        </AvatarFallback>
+                      </Avatar>
+                      <div>
+                        <div className="font-medium">{emp.name}</div>
+                        <div className="text-xs text-white/60">
+                          {emp.position}
+                        </div>
+                      </div>
+                    </div>
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="flex items-center space-x-3">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => {
+                if (selectedMonth === 0) {
+                  setSelectedMonth(11);
+                  setSelectedYear(selectedYear - 1);
+                } else {
+                  setSelectedMonth(selectedMonth - 1);
+                }
+              }}
+              className="text-white hover:bg-white/10 rounded-xl"
+            >
+              <ChevronLeft className="h-5 w-5" />
+            </Button>
+
+            <div className="text-white font-bold text-xl min-w-[160px] text-center bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
+              {monthNames[selectedMonth]} {selectedYear}
+            </div>
+
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => {
+                if (selectedMonth === 11) {
+                  setSelectedMonth(0);
+                  setSelectedYear(selectedYear + 1);
+                } else {
+                  setSelectedMonth(selectedMonth + 1);
+                }
+              }}
+              className="text-white hover:bg-white/10 rounded-xl"
+            >
+              <ChevronRight className="h-5 w-5" />
+            </Button>
+          </div>
+
+          <div className="flex items-center space-x-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="text-white hover:bg-white/10 rounded-xl"
+            >
+              <Download className="h-4 w-4 mr-2" />
+              Экспорт
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="text-white hover:bg-white/10 rounded-xl"
+            >
+              <Filter className="h-4 w-4 mr-2" />
+              Фильтр
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="text-white hover:bg-white/10 rounded-xl"
+            >
+              <MoreHorizontal className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+      </CardHeader>
+
+      <CardContent className="space-y-8 relative z-10">
+        {/* Круговая статистика */}
+        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6 mb-8">
+          <div className="relative group">
+            <div className="absolute inset-0 bg-gradient-to-r from-purple-500 to-indigo-500 rounded-2xl opacity-20 group-hover:opacity-30 transition-opacity blur-sm"></div>
+            <div className="relative glass-card p-6 rounded-2xl border border-purple-500/30 hover:border-purple-400/50 transition-all duration-300">
+              <div className="text-center">
+                <div className="relative w-16 h-16 mx-auto mb-3">
+                  <svg
+                    className="w-16 h-16 transform -rotate-90"
+                    viewBox="0 0 36 36"
+                  >
+                    <path
+                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                      fill="none"
+                      stroke="rgba(255,255,255,0.1)"
+                      strokeWidth={2}
+                    />
+                    <path
+                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                      fill="none"
+                      stroke="url(#gradient-purple)"
+                      strokeWidth={2}
+                      strokeDasharray={`${
+                        animatedStats ? (stats.totalHours / 200) * 100 : 0
+                      }, 100`}
+                      strokeLinecap="round"
+                    />
+                  </svg>
+                  <div className="absolute inset-0 flex items-center justify-center">
+                    <Clock className="h-6 w-6 text-purple-400" />
+                  </div>
+                </div>
+                <div className="text-white text-2xl font-bold mb-1">
+                  {animatedStats ? stats.totalHours : 0}
+                </div>
+                <div className="text-purple-300 text-sm">Часов</div>
+              </div>
+            </div>
+          </div>
+
+          <div className="relative group">
+            <div className="absolute inset-0 bg-gradient-to-r from-green-500 to-emerald-500 rounded-2xl opacity-20 group-hover:opacity-30 transition-opacity blur-sm"></div>
+            <div className="relative glass-card p-6 rounded-2xl border border-green-500/30 hover:border-green-400/50 transition-all duration-300">
+              <div className="text-center">
+                <div className="relative w-16 h-16 mx-auto mb-3">
+                  <svg
+                    className="w-16 h-16 transform -rotate-90"
+                    viewBox="0 0 36 36"
+                  >
+                    <path
+                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                      fill="none"
+                      stroke="rgba(255,255,255,0.1)"
+                      strokeWidth={2}
+                    />
+                    <path
+                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                      fill="none"
+                      stroke="url(#gradient-green)"
+                      strokeWidth={2}
+                      strokeDasharray={`${
+                        animatedStats ? (stats.workDays / 25) * 100 : 0
+                      }, 100`}
+                      strokeLinecap="round"
+                    />
+                  </svg>
+                  <div className="absolute inset-0 flex items-center justify-center">
+                    <CheckCircle className="h-6 w-6 text-green-400" />
+                  </div>
+                </div>
+                <div className="text-white text-2xl font-bold mb-1">
+                  {animatedStats ? stats.workDays : 0}
+                </div>
+                <div className="text-green-300 text-sm">Рабочих</div>
+              </div>
+            </div>
+          </div>
+
+          <div className="relative group">
+            <div className="absolute inset-0 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-2xl opacity-20 group-hover:opacity-30 transition-opacity blur-sm"></div>
+            <div className="relative glass-card p-6 rounded-2xl border border-blue-500/30 hover:border-blue-400/50 transition-all duration-300">
+              <div className="text-center">
+                <div className="relative w-16 h-16 mx-auto mb-3">
+                  <svg
+                    className="w-16 h-16 transform -rotate-90"
+                    viewBox="0 0 36 36"
+                  >
+                    <path
+                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                      fill="none"
+                      stroke="rgba(255,255,255,0.1)"
+                      strokeWidth={2}
+                    />
+                    <path
+                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                      fill="none"
+                      stroke="url(#gradient-blue)"
+                      strokeWidth={2}
+                      strokeDasharray={`${
+                        animatedStats ? (stats.vacation / 5) * 100 : 0
+                      }, 100`}
+                      strokeLinecap="round"
+                    />
+                  </svg>
+                  <div className="absolute inset-0 flex items-center justify-center">
+                    <Plane className="h-6 w-6 text-blue-400" />
+                  </div>
+                </div>
+                <div className="text-white text-2xl font-bold mb-1">
+                  {animatedStats ? stats.vacation : 0}
+                </div>
+                <div className="text-blue-300 text-sm">Отпуск</div>
+              </div>
+            </div>
+          </div>
+
+          <div className="relative group">
+            <div className="absolute inset-0 bg-gradient-to-r from-orange-500 to-yellow-500 rounded-2xl opacity-20 group-hover:opacity-30 transition-opacity blur-sm"></div>
+            <div className="relative glass-card p-6 rounded-2xl border border-orange-500/30 hover:border-orange-400/50 transition-all duration-300">
+              <div className="text-center">
+                <div className="relative w-16 h-16 mx-auto mb-3">
+                  <svg
+                    className="w-16 h-16 transform -rotate-90"
+                    viewBox="0 0 36 36"
+                  >
+                    <path
+                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                      fill="none"
+                      stroke="rgba(255,255,255,0.1)"
+                      strokeWidth={2}
+                    />
+                    <path
+                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                      fill="none"
+                      stroke="url(#gradient-orange)"
+                      strokeWidth={2}
+                      strokeDasharray={`${
+                        animatedStats ? (stats.sick / 3) * 100 : 0
+                      }, 100`}
+                      strokeLinecap="round"
+                    />
+                  </svg>
+                  <div className="absolute inset-0 flex items-center justify-center">
+                    <Heart className="h-6 w-6 text-orange-400" />
+                  </div>
+                </div>
+                <div className="text-white text-2xl font-bold mb-1">
+                  {animatedStats ? stats.sick : 0}
+                </div>
+                <div className="text-orange-300 text-sm">Больничный</div>
+              </div>
+            </div>
+          </div>
+
+          <div className="relative group">
+            <div className="absolute inset-0 bg-gradient-to-r from-yellow-500 to-amber-500 rounded-2xl opacity-20 group-hover:opacity-30 transition-opacity blur-sm"></div>
+            <div className="relative glass-card p-6 rounded-2xl border border-yellow-500/30 hover:border-yellow-400/50 transition-all duration-300">
+              <div className="text-center">
+                <div className="relative w-16 h-16 mx-auto mb-3">
+                  <svg
+                    className="w-16 h-16 transform -rotate-90"
+                    viewBox="0 0 36 36"
+                  >
+                    <path
+                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                      fill="none"
+                      stroke="rgba(255,255,255,0.1)"
+                      strokeWidth={2}
+                    />
+                    <path
+                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                      fill="none"
+                      stroke="url(#gradient-yellow)"
+                      strokeWidth={2}
+                      strokeDasharray={`${
+                        animatedStats ? (stats.overtime / 20) * 100 : 0
+                      }, 100`}
+                      strokeLinecap="round"
+                    />
+                  </svg>
+                  <div className="absolute inset-0 flex items-center justify-center">
+                    <Zap className="h-6 w-6 text-yellow-400" />
+                  </div>
+                </div>
+                <div className="text-white text-2xl font-bold mb-1">
+                  {animatedStats ? stats.overtime : 0}
+                </div>
+                <div className="text-yellow-300 text-sm">Переработка</div>
+              </div>
+            </div>
+          </div>
+
+          <div className="relative group">
+            <div className="absolute inset-0 bg-gradient-to-r from-pink-500 to-rose-500 rounded-2xl opacity-20 group-hover:opacity-30 transition-opacity blur-sm"></div>
+            <div className="relative glass-card p-6 rounded-2xl border border-pink-500/30 hover:border-pink-400/50 transition-all duration-300">
+              <div className="text-center">
+                <div className="relative w-16 h-16 mx-auto mb-3">
+                  <svg
+                    className="w-16 h-16 transform -rotate-90"
+                    viewBox="0 0 36 36"
+                  >
+                    <path
+                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                      fill="none"
+                      stroke="rgba(255,255,255,0.1)"
+                      strokeWidth={2}
+                    />
+                    <path
+                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                      fill="none"
+                      stroke="url(#gradient-pink)"
+                      strokeWidth={2}
+                      strokeDasharray={`${
+                        animatedStats ? stats.avgEfficiency : 0
+                      }, 100`}
+                      strokeLinecap="round"
+                    />
+                  </svg>
+                  <div className="absolute inset-0 flex items-center justify-center">
+                    <Activity className="h-6 w-6 text-pink-400" />
+                  </div>
+                </div>
+                <div className="text-white text-2xl font-bold mb-1">
+                  {animatedStats ? stats.avgEfficiency : 0}%
+                </div>
+                <div className="text-pink-300 text-sm">КПД</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Календарь в виде гексагональной сетки */}
+        <div className="space-y-6">
+          {/* Заголовки дней недели */}
+          <div className="flex justify-center">
+            <div className="grid grid-cols-7 gap-4 text-center max-w-2xl">
+              {dayNames.map((day) => (
+                <div
+                  key={day}
+                  className="text-white/70 font-bold text-lg py-3 bg-white/5 rounded-xl"
+                >
+                  {day}
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Календарная сетка */}
+          <div className="flex justify-center">
+            <div className="grid grid-cols-7 gap-4 max-w-2xl">
+              {/* Пустые ячейки для начала месяца */}
+              {Array.from({
+                length:
+                  new Date(selectedYear, selectedMonth, 1).getDay() === 0
+                    ? 6
+                    : new Date(selectedYear, selectedMonth, 1).getDay() - 1,
+              }).map((_, index) => (
+                <div key={`empty-${index}`} className="aspect-square"></div>
+              ))}
+
+              {/* Дни месяца */}
+              {calendarData.map((day, index) => (
+                <div
+                  key={index}
+                  className={`
+                    aspect-square p-3 rounded-2xl border-2 transition-all duration-500 hover:scale-110 cursor-pointer group relative overflow-hidden
+                    ${
+                      day.status === "work"
+                        ? "border-green-400/50 bg-gradient-to-br from-green-500/20 to-emerald-500/20 hover:from-green-500/30 hover:to-emerald-500/30"
+                        : ""
+                    }
+                    ${
+                      day.status === "weekend"
+                        ? "border-gray-400/50 bg-gradient-to-br from-gray-500/20 to-slate-500/20"
+                        : ""
+                    }
+                    ${
+                      day.status === "vacation"
+                        ? "border-blue-400/50 bg-gradient-to-br from-blue-500/20 to-cyan-500/20"
+                        : ""
+                    }
+                    ${
+                      day.status === "sick"
+                        ? "border-orange-400/50 bg-gradient-to-br from-orange-500/20 to-yellow-500/20"
+                        : ""
+                    }
+                    ${
+                      day.status === "absent"
+                        ? "border-red-400/50 bg-gradient-to-br from-red-500/20 to-rose-500/20"
+                        : ""
+                    }
+                  `}
+                >
+                  {/* Эффект свечения */}
+                  <div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-2xl"></div>
+
+                  <div className="relative h-full flex flex-col justify-between z-10">
+                    <div className="flex items-center justify-between">
+                      <span className="text-white font-bold text-lg">
+                        {day.day}
+                      </span>
+                      {day.workType && (
+                        <div className="text-white/80">
+                          {getWorkTypeIcon(day.workType)}
+                        </div>
+                      )}
+                    </div>
+
+                    {day.status === "work" && (
+                      <div className="space-y-2">
+                        <div className="flex items-center justify-between">
+                          <span className="text-white font-semibold text-sm">
+                            {day.hours}ч
+                          </span>
+                          {day.overtime > 0 && (
+                            <Badge className="bg-yellow-500/30 text-yellow-200 text-xs border-yellow-400/30">
+                              +{day.overtime}
+                            </Badge>
+                          )}
+                        </div>
+
+                        <div className="flex items-center justify-between">
+                          {getMoodIcon(day.mood)}
+                          {day.efficiency && (
+                            <div className="text-right">
+                              <div className="text-white/80 text-xs font-medium">
+                                {day.efficiency}%
+                              </div>
+                              <div className="w-8 h-1 bg-white/20 rounded-full overflow-hidden">
+                                <div
+                                  className="h-full bg-gradient-to-r from-purple-400 to-pink-400 transition-all duration-1000"
+                                  style={{ width: `${day.efficiency}%` }}
+                                ></div>
+                              </div>
+                            </div>
+                          )}
+                        </div>
+                      </div>
+                    )}
+
+                    {day.status !== "work" && day.status !== "weekend" && (
+                      <div className="flex justify-center">
+                        <div
+                          className={`w-4 h-4 rounded-full ${getStatusColor(
+                            day.status
+                          )} animate-pulse`}
+                        ></div>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {/* Расширенная легенда */}
+        <div className="bg-white/5 rounded-2xl p-6 backdrop-blur-sm border border-white/10">
+          <h4 className="text-white font-semibold text-lg mb-4 text-center">
+            Легенда статусов
+          </h4>
+          <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
+            <div className="flex flex-col items-center space-y-2 bg-white/5 p-4 rounded-xl">
+              <div className="w-6 h-6 rounded-full bg-gradient-to-r from-emerald-500 to-green-500 flex items-center justify-center">
+                <CheckCircle className="h-4 w-4 text-white" />
+              </div>
+              <span className="text-white/70 text-sm font-medium">Работа</span>
+              <span className="text-white/50 text-xs text-center">
+                Обычный рабочий день
+              </span>
+            </div>
+
+            <div className="flex flex-col items-center space-y-2 bg-white/5 p-4 rounded-xl">
+              <div className="w-6 h-6 rounded-full bg-gradient-to-r from-slate-500 to-gray-500 flex items-center justify-center">
+                <Moon className="h-4 w-4 text-white" />
+              </div>
+              <span className="text-white/70 text-sm font-medium">
+                Выходной
+              </span>
+              <span className="text-white/50 text-xs text-center">
+                Суббота/Воскресенье
+              </span>
+            </div>
+
+            <div className="flex flex-col items-center space-y-2 bg-white/5 p-4 rounded-xl">
+              <div className="w-6 h-6 rounded-full bg-gradient-to-r from-blue-500 to-cyan-500 flex items-center justify-center">
+                <Plane className="h-4 w-4 text-white" />
+              </div>
+              <span className="text-white/70 text-sm font-medium">Отпуск</span>
+              <span className="text-white/50 text-xs text-center">
+                Оплачиваемый отпуск
+              </span>
+            </div>
+
+            <div className="flex flex-col items-center space-y-2 bg-white/5 p-4 rounded-xl">
+              <div className="w-6 h-6 rounded-full bg-gradient-to-r from-amber-500 to-orange-500 flex items-center justify-center">
+                <Heart className="h-4 w-4 text-white" />
+              </div>
+              <span className="text-white/70 text-sm font-medium">
+                Больничный
+              </span>
+              <span className="text-white/50 text-xs text-center">
+                По болезни
+              </span>
+            </div>
+
+            <div className="flex flex-col items-center space-y-2 bg-white/5 p-4 rounded-xl">
+              <div className="w-6 h-6 rounded-full bg-gradient-to-r from-red-500 to-rose-500 flex items-center justify-center">
+                <XCircle className="h-4 w-4 text-white" />
+              </div>
+              <span className="text-white/70 text-sm font-medium">Прогул</span>
+              <span className="text-white/50 text-xs text-center">
+                Неявка без причины
+              </span>
+            </div>
+          </div>
+        </div>
+      </CardContent>
+
+      {/* SVG градиенты для круговых диаграмм */}
+      <svg width="0" height="0" style={{ position: "absolute" }}>
+        <defs>
+          <linearGradient
+            id="gradient-purple"
+            x1="0%"
+            y1="0%"
+            x2="100%"
+            y2="100%"
+          >
+            <stop offset="0%" stopColor="#8B5CF6" />
+            <stop offset="100%" stopColor="#6366F1" />
+          </linearGradient>
+          <linearGradient
+            id="gradient-green"
+            x1="0%"
+            y1="0%"
+            x2="100%"
+            y2="100%"
+          >
+            <stop offset="0%" stopColor="#10B981" />
+            <stop offset="100%" stopColor="#059669" />
+          </linearGradient>
+          <linearGradient
+            id="gradient-blue"
+            x1="0%"
+            y1="0%"
+            x2="100%"
+            y2="100%"
+          >
+            <stop offset="0%" stopColor="#3B82F6" />
+            <stop offset="100%" stopColor="#06B6D4" />
+          </linearGradient>
+          <linearGradient
+            id="gradient-orange"
+            x1="0%"
+            y1="0%"
+            x2="100%"
+            y2="100%"
+          >
+            <stop offset="0%" stopColor="#F59E0B" />
+            <stop offset="100%" stopColor="#F97316" />
+          </linearGradient>
+          <linearGradient
+            id="gradient-yellow"
+            x1="0%"
+            y1="0%"
+            x2="100%"
+            y2="100%"
+          >
+            <stop offset="0%" stopColor="#EAB308" />
+            <stop offset="100%" stopColor="#F59E0B" />
+          </linearGradient>
+          <linearGradient
+            id="gradient-pink"
+            x1="0%"
+            y1="0%"
+            x2="100%"
+            y2="100%"
+          >
+            <stop offset="0%" stopColor="#EC4899" />
+            <stop offset="100%" stopColor="#F43F5E" />
+          </linearGradient>
+        </defs>
+      </svg>
+    </Card>
+  );
+
+  const renderCustomVariant = () => (
+    <Card
+      className="glass-card border-white/10 overflow-hidden relative"
+      style={{ height: "800px" }}
+    >
+      {/* Космический фон с плавающими частицами и звездным полем (из Галактического) */}
+      <div className="absolute inset-0 bg-gradient-to-br from-purple-900/20 via-blue-900/20 to-indigo-900/20">
+        <div
+          className="absolute inset-0 opacity-50"
+          style={{
+            backgroundImage:
+              'url(\'data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="0.05"%3E%3Ccircle cx="7" cy="7" r="1"/%3E%3Ccircle cx="27" cy="27" r="1"/%3E%3Ccircle cx="47" cy="47" r="1"/%3E%3Ccircle cx="17" cy="37" r="1"/%3E%3Ccircle cx="37" cy="17" r="1"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E\')',
+          }}
+        ></div>
+
+        {/* Плавающие частицы */}
+        <div className="absolute top-10 left-10 w-2 h-2 bg-purple-400/30 rounded-full animate-pulse"></div>
+        <div className="absolute top-20 right-20 w-1 h-1 bg-blue-400/40 rounded-full animate-pulse delay-1000"></div>
+        <div className="absolute bottom-20 left-20 w-1.5 h-1.5 bg-cyan-400/30 rounded-full animate-pulse delay-2000"></div>
+        <div className="absolute bottom-32 right-32 w-1 h-1 bg-pink-400/40 rounded-full animate-pulse delay-3000"></div>
+        <div className="absolute top-1/2 left-1/4 w-0.5 h-0.5 bg-white/60 rounded-full animate-pulse delay-4000"></div>
+        <div className="absolute top-1/3 right-1/3 w-1 h-1 bg-indigo-400/50 rounded-full animate-pulse delay-5000"></div>
+
+        {/* Звездное поле */}
+        <div className="absolute inset-0">
+          {Array.from({ length: 20 }).map((_, i) => (
+            <div
+              key={i}
+              className="absolute w-0.5 h-0.5 bg-white/40 rounded-full animate-pulse"
+              style={{
+                top: `${Math.random() * 100}%`,
+                left: `${Math.random() * 100}%`,
+                animationDelay: `${Math.random() * 3}s`,
+                animationDuration: `${2 + Math.random() * 2}s`,
+              }}
+            />
+          ))}
+        </div>
+      </div>
+
+      <CardContent className="space-y-6 relative z-10 p-6 h-full overflow-y-auto">
+        {/* Заголовок сотрудника */}
+        <div className="bg-white/5 rounded-2xl p-6 backdrop-blur-sm border border-white/10">
+          <div className="flex items-center space-x-6">
+            <Avatar className="h-20 w-20 ring-4 ring-purple-500/30">
+              <AvatarImage src={currentEmployee.avatar} />
+              <AvatarFallback className="bg-gradient-to-br from-purple-600 to-blue-600 text-white text-xl font-bold">
+                {currentEmployee.name
+                  .split(" ")
+                  .map((n) => n[0])
+                  .join("")}
+              </AvatarFallback>
+            </Avatar>
+
+            <div className="flex-1">
+              <h3 className="text-2xl font-bold text-white mb-1">
+                {currentEmployee.name}
+              </h3>
+              <p className="text-purple-300 text-base mb-2">
+                {currentEmployee.position}
+              </p>
+              <div className="flex items-center space-x-4 text-sm text-white/70">
+                <span>{currentEmployee.department}</span>
+                <span>•</span>
+                <span>{currentEmployee.level}</span>
+                <span>•</span>
+                <span>{currentEmployee.experience}</span>
+              </div>
+            </div>
+
+            {/* Круговые диаграммы статистики (из Космического) */}
+            <div className="flex items-center space-x-6">
+              <div className="text-center">
+                <div className="relative w-16 h-16 mx-auto mb-2">
+                  <svg
+                    className="w-16 h-16 transform -rotate-90"
+                    viewBox="0 0 36 36"
+                  >
+                    <path
+                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                      fill="none"
+                      stroke="rgba(255,255,255,0.1)"
+                      strokeWidth={2}
+                    />
+                    <path
+                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                      fill="none"
+                      stroke="url(#gradient-purple)"
+                      strokeWidth={2}
+                      strokeDasharray={`${
+                        animatedStats ? (stats.totalHours / 200) * 100 : 0
+                      }, 100`}
+                      strokeLinecap="round"
+                    />
+                  </svg>
+                  <div className="absolute inset-0 flex items-center justify-center">
+                    <span className="text-white font-bold text-sm">
+                      {animatedStats ? stats.totalHours : 0}
+                    </span>
+                  </div>
+                </div>
+                <p className="text-purple-300 text-xs">Часов</p>
+              </div>
+
+              <div className="text-center">
+                <div className="relative w-16 h-16 mx-auto mb-2">
+                  <svg
+                    className="w-16 h-16 transform -rotate-90"
+                    viewBox="0 0 36 36"
+                  >
+                    <path
+                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                      fill="none"
+                      stroke="rgba(255,255,255,0.1)"
+                      strokeWidth={2}
+                    />
+                    <path
+                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                      fill="none"
+                      stroke="url(#gradient-pink)"
+                      strokeWidth={2}
+                      strokeDasharray={`${
+                        animatedStats ? currentEmployee.efficiency : 0
+                      }, 100`}
+                      strokeLinecap="round"
+                    />
+                  </svg>
+                  <div className="absolute inset-0 flex items-center justify-center">
+                    <span className="text-white font-bold text-sm">
+                      {currentEmployee.efficiency}%
+                    </span>
+                  </div>
+                </div>
+                <p className="text-pink-300 text-xs">Эффективность</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Навигация и управление */}
+        <div className="flex items-center justify-between bg-white/5 rounded-2xl p-4 backdrop-blur-sm border border-white/10">
+          <div className="flex items-center space-x-4">
+            <Select
+              value={selectedEmployee}
+              onValueChange={setSelectedEmployee}
+            >
+              <SelectTrigger className="w-64 glass-input bg-white/10 border-white/20 text-white hover:bg-white/15">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent className="bg-gray-900/95 backdrop-blur border-white/20 text-white">
+                {employees.map((emp) => (
+                  <SelectItem
+                    key={emp.id}
+                    value={emp.id}
+                    className="text-white hover:bg-white/10"
+                  >
+                    <div className="flex items-center space-x-3">
+                      <Avatar className="h-6 w-6">
+                        <AvatarImage src={emp.avatar} />
+                        <AvatarFallback className="bg-purple-600 text-white text-xs">
+                          {emp.name
+                            .split(" ")
+                            .map((n) => n[0])
+                            .join("")}
+                        </AvatarFallback>
+                      </Avatar>
+                      <div>
+                        <div className="font-medium">{emp.name}</div>
+                        <div className="text-xs text-white/60">
+                          {emp.position}
+                        </div>
+                      </div>
+                    </div>
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="flex items-center space-x-4">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="text-white hover:bg-white/10"
+              onClick={() => {
+                if (selectedMonth === 0) {
+                  setSelectedMonth(11);
+                  setSelectedYear(selectedYear - 1);
+                } else {
+                  setSelectedMonth(selectedMonth - 1);
+                }
+              }}
+            >
+              <ChevronLeft className="h-4 w-4" />
+            </Button>
+
+            <div className="text-center min-w-[120px]">
+              <div className="text-white font-bold text-lg">
+                {monthNames[selectedMonth]} {selectedYear}
+              </div>
+            </div>
+
+            <Button
+              variant="ghost"
+              size="sm"
+              className="text-white hover:bg-white/10"
+              onClick={() => {
+                if (selectedMonth === 11) {
+                  setSelectedMonth(0);
+                  setSelectedYear(selectedYear + 1);
+                } else {
+                  setSelectedMonth(selectedMonth + 1);
+                }
+              }}
+            >
+              <ChevronRight className="h-4 w-4" />
+            </Button>
+          </div>
+
+          <div className="flex items-center space-x-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="text-white hover:bg-white/10"
+            >
+              <Download className="h-4 w-4 mr-2" />
+              Экспорт
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="text-white hover:bg-white/10"
+            >
+              <Settings className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+
+        {/* Статистика с круговыми диаграммами (из Космического) */}
+        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6 mb-8">
+          <div className="relative group">
+            <div className="absolute inset-0 bg-gradient-to-r from-purple-500 to-indigo-500 rounded-2xl opacity-20 group-hover:opacity-30 transition-opacity blur-sm"></div>
+            <div className="relative glass-card p-6 rounded-2xl border border-purple-500/30 hover:border-purple-400/50 transition-all duration-300 text-center">
+              <div className="text-center">
+                <div className="relative w-16 h-16 mx-auto mb-3">
+                  <svg
+                    className="w-16 h-16 transform -rotate-90"
+                    viewBox="0 0 36 36"
+                  >
+                    <path
+                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                      fill="none"
+                      stroke="rgba(255,255,255,0.1)"
+                      strokeWidth={2}
+                    />
+                    <path
+                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                      fill="none"
+                      stroke="url(#gradient-purple)"
+                      strokeWidth={2}
+                      strokeDasharray={`${
+                        animatedStats ? (stats.totalHours / 200) * 100 : 0
+                      }, 100`}
+                      strokeLinecap="round"
+                    />
+                  </svg>
+                  <div className="absolute inset-0 flex items-center justify-center">
+                    <Clock className="h-6 w-6 text-purple-400" />
+                  </div>
+                </div>
+                <div className="text-white font-bold text-2xl mb-1">
+                  {animatedStats ? stats.totalHours : 0}
+                </div>
+                <p className="text-purple-300 text-sm font-medium">Часов</p>
+              </div>
+            </div>
+          </div>
+
+          <div className="relative group">
+            <div className="absolute inset-0 bg-gradient-to-r from-green-500 to-emerald-500 rounded-2xl opacity-20 group-hover:opacity-30 transition-opacity blur-sm"></div>
+            <div className="relative glass-card p-6 rounded-2xl border border-green-500/30 hover:border-green-400/50 transition-all duration-300 text-center">
+              <div className="text-center">
+                <div className="relative w-16 h-16 mx-auto mb-3">
+                  <svg
+                    className="w-16 h-16 transform -rotate-90"
+                    viewBox="0 0 36 36"
+                  >
+                    <path
+                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                      fill="none"
+                      stroke="rgba(255,255,255,0.1)"
+                      strokeWidth={2}
+                    />
+                    <path
+                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                      fill="none"
+                      stroke="url(#gradient-green)"
+                      strokeWidth={2}
+                      strokeDasharray={`${
+                        animatedStats ? (stats.workDays / 25) * 100 : 0
+                      }, 100`}
+                      strokeLinecap="round"
+                    />
+                  </svg>
+                  <div className="absolute inset-0 flex items-center justify-center">
+                    <CheckCircle className="h-6 w-6 text-green-400" />
+                  </div>
+                </div>
+                <div className="text-white font-bold text-2xl mb-1">
+                  {animatedStats ? stats.workDays : 0}
+                </div>
+                <p className="text-green-300 text-sm font-medium">Рабочих</p>
+              </div>
+            </div>
+          </div>
+
+          <div className="relative group">
+            <div className="absolute inset-0 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-2xl opacity-20 group-hover:opacity-30 transition-opacity blur-sm"></div>
+            <div className="relative glass-card p-6 rounded-2xl border border-blue-500/30 hover:border-blue-400/50 transition-all duration-300 text-center">
+              <div className="text-center">
+                <div className="relative w-16 h-16 mx-auto mb-3">
+                  <svg
+                    className="w-16 h-16 transform -rotate-90"
+                    viewBox="0 0 36 36"
+                  >
+                    <path
+                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                      fill="none"
+                      stroke="rgba(255,255,255,0.1)"
+                      strokeWidth={2}
+                    />
+                    <path
+                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                      fill="none"
+                      stroke="url(#gradient-blue)"
+                      strokeWidth={2}
+                      strokeDasharray={`${
+                        animatedStats ? (stats.vacation / 5) * 100 : 0
+                      }, 100`}
+                      strokeLinecap="round"
+                    />
+                  </svg>
+                  <div className="absolute inset-0 flex items-center justify-center">
+                    <Plane className="h-6 w-6 text-blue-400" />
+                  </div>
+                </div>
+                <div className="text-white font-bold text-2xl mb-1">
+                  {animatedStats ? stats.vacation : 0}
+                </div>
+                <p className="text-blue-300 text-sm font-medium">Отпуск</p>
+              </div>
+            </div>
+          </div>
+
+          <div className="relative group">
+            <div className="absolute inset-0 bg-gradient-to-r from-orange-500 to-red-500 rounded-2xl opacity-20 group-hover:opacity-30 transition-opacity blur-sm"></div>
+            <div className="relative glass-card p-6 rounded-2xl border border-orange-500/30 hover:border-orange-400/50 transition-all duration-300 text-center">
+              <div className="text-center">
+                <div className="relative w-16 h-16 mx-auto mb-3">
+                  <svg
+                    className="w-16 h-16 transform -rotate-90"
+                    viewBox="0 0 36 36"
+                  >
+                    <path
+                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                      fill="none"
+                      stroke="rgba(255,255,255,0.1)"
+                      strokeWidth={2}
+                    />
+                    <path
+                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                      fill="none"
+                      stroke="url(#gradient-orange)"
+                      strokeWidth={2}
+                      strokeDasharray={`${
+                        animatedStats ? (stats.sick / 3) * 100 : 0
+                      }, 100`}
+                      strokeLinecap="round"
+                    />
+                  </svg>
+                  <div className="absolute inset-0 flex items-center justify-center">
+                    <Heart className="h-6 w-6 text-orange-400" />
+                  </div>
+                </div>
+                <div className="text-white font-bold text-2xl mb-1">
+                  {animatedStats ? stats.sick : 0}
+                </div>
+                <p className="text-orange-300 text-sm font-medium">
+                  Больничный
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <div className="relative group">
+            <div className="absolute inset-0 bg-gradient-to-r from-yellow-500 to-orange-500 rounded-2xl opacity-20 group-hover:opacity-30 transition-opacity blur-sm"></div>
+            <div className="relative glass-card p-6 rounded-2xl border border-yellow-500/30 hover:border-yellow-400/50 transition-all duration-300 text-center">
+              <div className="text-center">
+                <div className="relative w-16 h-16 mx-auto mb-3">
+                  <svg
+                    className="w-16 h-16 transform -rotate-90"
+                    viewBox="0 0 36 36"
+                  >
+                    <path
+                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                      fill="none"
+                      stroke="rgba(255,255,255,0.1)"
+                      strokeWidth={2}
+                    />
+                    <path
+                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                      fill="none"
+                      stroke="url(#gradient-yellow)"
+                      strokeWidth={2}
+                      strokeDasharray={`${
+                        animatedStats ? (stats.overtime / 20) * 100 : 0
+                      }, 100`}
+                      strokeLinecap="round"
+                    />
+                  </svg>
+                  <div className="absolute inset-0 flex items-center justify-center">
+                    <Zap className="h-6 w-6 text-yellow-400" />
+                  </div>
+                </div>
+                <div className="text-white font-bold text-2xl mb-1">
+                  {animatedStats ? stats.overtime : 0}
+                </div>
+                <p className="text-yellow-300 text-sm font-medium">
+                  Переработка
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <div className="relative group">
+            <div className="absolute inset-0 bg-gradient-to-r from-pink-500 to-purple-500 rounded-2xl opacity-20 group-hover:opacity-30 transition-opacity blur-sm"></div>
+            <div className="relative glass-card p-6 rounded-2xl border border-pink-500/30 hover:border-pink-400/50 transition-all duration-300 text-center">
+              <div className="text-center">
+                <div className="relative w-16 h-16 mx-auto mb-3">
+                  <svg
+                    className="w-16 h-16 transform -rotate-90"
+                    viewBox="0 0 36 36"
+                  >
+                    <path
+                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                      fill="none"
+                      stroke="rgba(255,255,255,0.1)"
+                      strokeWidth={2}
+                    />
+                    <path
+                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                      fill="none"
+                      stroke="url(#gradient-pink)"
+                      strokeWidth={2}
+                      strokeDasharray={`${
+                        animatedStats ? stats.avgEfficiency : 0
+                      }, 100`}
+                      strokeLinecap="round"
+                    />
+                  </svg>
+                  <div className="absolute inset-0 flex items-center justify-center">
+                    <Activity className="h-6 w-6 text-pink-400" />
+                  </div>
+                </div>
+                <div className="text-white font-bold text-2xl mb-1">
+                  {animatedStats ? stats.avgEfficiency : 0}%
+                </div>
+                <p className="text-pink-300 text-sm font-medium">КПД</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Гексагональная календарная сетка */}
+        <div className="space-y-4">
+          {/* Заголовки дней недели */}
+          <div className="grid grid-cols-7 gap-3 text-center">
+            {dayNames.map((day) => (
+              <div
+                key={day}
+                className="text-white/70 font-bold text-sm py-2 bg-white/5 rounded-xl border border-white/10"
+              >
+                {day}
+              </div>
+            ))}
+          </div>
+
+          {/* Календарная сетка */}
+          <div className="grid grid-cols-7 gap-3">
+            {/* Пустые ячейки для начала месяца */}
+            {Array.from({
+              length:
+                new Date(selectedYear, selectedMonth, 1).getDay() === 0
+                  ? 6
+                  : new Date(selectedYear, selectedMonth, 1).getDay() - 1,
+            }).map((_, index) => (
+              <div key={`empty-${index}`} className="aspect-square"></div>
+            ))}
+
+            {/* Дни месяца */}
+            {calendarData.map((day) => (
+              <div
+                key={day.day}
+                className={`
+                   aspect-square p-3 rounded-2xl border-2 transition-all duration-500 hover:scale-110 cursor-pointer group relative overflow-hidden
+                   ${
+                     day.status === "work"
+                       ? "border-green-400/50 bg-gradient-to-br from-green-500/20 to-emerald-500/20 hover:from-green-500/30 hover:to-emerald-500/30 shadow-lg shadow-green-500/20"
+                       : ""
+                   }
+                   ${
+                     day.status === "weekend"
+                       ? "border-gray-400/50 bg-gradient-to-br from-gray-500/20 to-slate-500/20"
+                       : ""
+                   }
+                   ${
+                     day.status === "vacation"
+                       ? "border-blue-400/50 bg-gradient-to-br from-blue-500/20 to-cyan-500/20 shadow-lg shadow-blue-500/20"
+                       : ""
+                   }
+                   ${
+                     day.status === "sick"
+                       ? "border-orange-400/50 bg-gradient-to-br from-orange-500/20 to-yellow-500/20 shadow-lg shadow-orange-500/20"
+                       : ""
+                   }
+                   ${
+                     day.status === "absent"
+                       ? "border-red-400/50 bg-gradient-to-br from-red-500/20 to-rose-500/20 shadow-lg shadow-red-500/20"
+                       : ""
+                   }
+                 `}
+              >
+                {/* Эффект свечения */}
+                <div className="absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-gradient-to-br from-white/10 to-transparent"></div>
+
+                <div className="relative h-full flex flex-col justify-between z-10">
+                  <div className="flex items-center justify-between">
+                    <span className="text-white font-bold text-base">
+                      {day.day}
+                    </span>
+                    {day.workType && (
+                      <div className="text-white/80">
+                        {getWorkTypeIcon(day.workType)}
+                      </div>
+                    )}
+                  </div>
+
+                  {day.status === "work" && (
+                    <div className="space-y-1">
+                      <div className="flex items-center justify-between">
+                        <span className="text-white font-semibold text-sm">
+                          {day.hours}ч
+                        </span>
+                        {day.overtime > 0 && (
+                          <Badge className="bg-yellow-500/30 text-yellow-200 text-xs border-yellow-400/30">
+                            +{day.overtime}
+                          </Badge>
+                        )}
+                      </div>
+
+                      <div className="flex items-center justify-between">
+                        {getMoodIcon(day.mood)}
+                        {day.efficiency && (
+                          <div className="text-right">
+                            <div className="text-white/80 text-xs font-medium">
+                              {day.efficiency}%
+                            </div>
+                            <div className="w-8 h-1 bg-white/20 rounded-full overflow-hidden">
+                              <div
+                                className="h-full bg-gradient-to-r from-cyan-400 to-blue-500 transition-all duration-1000"
+                                style={{
+                                  width: animatedStats
+                                    ? `${day.efficiency}%`
+                                    : "0%",
+                                }}
+                              ></div>
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  )}
+
+                  {day.status !== "work" && day.status !== "weekend" && (
+                    <div className="flex justify-center">
+                      <div
+                        className={`w-4 h-4 rounded-full ${getStatusColor(
+                          day.status
+                        )} animate-pulse shadow-lg`}
+                      ></div>
+                    </div>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </CardContent>
+
+      {/* SVG градиенты для круговых диаграмм */}
+      <svg width="0" height="0" style={{ position: "absolute" }}>
+        <defs>
+          <linearGradient
+            id="gradient-purple"
+            x1="0%"
+            y1="0%"
+            x2="100%"
+            y2="100%"
+          >
+            <stop offset="0%" stopColor="#8B5CF6" />
+            <stop offset="100%" stopColor="#6366F1" />
+          </linearGradient>
+          <linearGradient
+            id="gradient-green"
+            x1="0%"
+            y1="0%"
+            x2="100%"
+            y2="100%"
+          >
+            <stop offset="0%" stopColor="#10B981" />
+            <stop offset="100%" stopColor="#059669" />
+          </linearGradient>
+          <linearGradient
+            id="gradient-blue"
+            x1="0%"
+            y1="0%"
+            x2="100%"
+            y2="100%"
+          >
+            <stop offset="0%" stopColor="#3B82F6" />
+            <stop offset="100%" stopColor="#06B6D4" />
+          </linearGradient>
+          <linearGradient
+            id="gradient-orange"
+            x1="0%"
+            y1="0%"
+            x2="100%"
+            y2="100%"
+          >
+            <stop offset="0%" stopColor="#F59E0B" />
+            <stop offset="100%" stopColor="#F97316" />
+          </linearGradient>
+          <linearGradient
+            id="gradient-yellow"
+            x1="0%"
+            y1="0%"
+            x2="100%"
+            y2="100%"
+          >
+            <stop offset="0%" stopColor="#EAB308" />
+            <stop offset="100%" stopColor="#F59E0B" />
+          </linearGradient>
+          <linearGradient
+            id="gradient-pink"
+            x1="0%"
+            y1="0%"
+            x2="100%"
+            y2="100%"
+          >
+            <stop offset="0%" stopColor="#EC4899" />
+            <stop offset="100%" stopColor="#F43F5E" />
+          </linearGradient>
+        </defs>
+      </svg>
+    </Card>
+  );
+
+  // Компактный вариант для 13-дюймовых экранов
+  const renderCompactVariant = () => (
+    <Card
+      className="glass-card border-white/10 overflow-hidden relative"
+      style={{ height: "600px" }}
+    >
+      {/* Космический фон с плавающими частицами и звездным полем (из Галактического) */}
+      <div className="absolute inset-0 bg-gradient-to-br from-purple-900/20 via-blue-900/20 to-indigo-900/20">
+        <div
+          className="absolute inset-0 opacity-50"
+          style={{
+            backgroundImage:
+              'url(\'data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="0.05"%3E%3Ccircle cx="7" cy="7" r="1"/%3E%3Ccircle cx="27" cy="27" r="1"/%3E%3Ccircle cx="47" cy="47" r="1"/%3E%3Ccircle cx="17" cy="37" r="1"/%3E%3Ccircle cx="37" cy="17" r="1"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E\')',
+          }}
+        ></div>
+
+        {/* Плавающие частицы */}
+        <div className="absolute top-10 left-10 w-2 h-2 bg-purple-400/30 rounded-full animate-pulse"></div>
+        <div className="absolute top-20 right-20 w-1 h-1 bg-blue-400/40 rounded-full animate-pulse delay-1000"></div>
+        <div className="absolute bottom-20 left-20 w-1.5 h-1.5 bg-cyan-400/30 rounded-full animate-pulse delay-2000"></div>
+        <div className="absolute bottom-32 right-32 w-1 h-1 bg-pink-400/40 rounded-full animate-pulse delay-3000"></div>
+
+        {/* Звездное поле */}
+        <div className="absolute inset-0">
+          {Array.from({ length: 15 }).map((_, i) => (
+            <div
+              key={i}
+              className="absolute w-0.5 h-0.5 bg-white/40 rounded-full animate-pulse"
+              style={{
+                top: `${Math.random() * 100}%`,
+                left: `${Math.random() * 100}%`,
+                animationDelay: `${Math.random() * 3}s`,
+                animationDuration: `${2 + Math.random() * 2}s`,
+              }}
+            />
+          ))}
+        </div>
+      </div>
+
+      <CardContent className="space-y-4 relative z-10 p-4 h-full overflow-y-auto">
+        {/* Компактный заголовок сотрудника */}
+        <div className="bg-white/5 rounded-xl p-4 backdrop-blur-sm border border-white/10">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center space-x-4">
+              <Avatar className="h-12 w-12 ring-2 ring-purple-500/30">
+                <AvatarImage src={currentEmployee.avatar} />
+                <AvatarFallback className="bg-gradient-to-br from-purple-600 to-blue-600 text-white text-sm font-bold">
+                  {currentEmployee.name
+                    .split(" ")
+                    .map((n) => n[0])
+                    .join("")}
+                </AvatarFallback>
+              </Avatar>
+
+              <div className="flex-1">
+                <h3 className="text-lg font-bold text-white mb-1">
+                  {currentEmployee.name}
+                </h3>
+                <p className="text-purple-300 text-sm mb-1">
+                  {currentEmployee.position}
+                </p>
+                <div className="flex items-center space-x-3 text-xs text-white/70">
+                  <span>{currentEmployee.department}</span>
+                  <span>•</span>
+                  <span>{currentEmployee.level}</span>
+                </div>
+              </div>
+            </div>
+
+            {/* Компактная навигация */}
+            <div className="flex items-center space-x-2">
+              <Select
+                value={selectedEmployee}
+                onValueChange={setSelectedEmployee}
+              >
+                <SelectTrigger className="w-32 bg-white/10 border-white/30 text-white text-xs">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {employees.map((emp) => (
+                    <SelectItem key={emp.id} value={emp.id}>
+                      {emp.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+
+              <Button
+                variant="ghost"
+                size="sm"
+                className="text-white/70 hover:text-white hover:bg-white/10 h-8 w-8 p-0"
+              >
+                <Settings className="h-4 w-4" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="text-white/70 hover:text-white hover:bg-white/10 h-8 w-8 p-0"
+              >
+                <Download className="h-4 w-4" />
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        {/* Компактная статистика в одну строку */}
+        <div className="grid grid-cols-6 gap-2">
+          <div className="relative group">
+            <div className="absolute inset-0 bg-gradient-to-r from-purple-500 to-indigo-500 rounded-xl opacity-20 group-hover:opacity-30 transition-opacity blur-sm"></div>
+            <div className="relative glass-card p-3 rounded-xl border border-purple-500/30 hover:border-purple-400/50 transition-all duration-300 text-center">
+              <div className="relative w-10 h-10 mx-auto mb-2">
+                <svg
+                  className="w-10 h-10 transform -rotate-90"
+                  viewBox="0 0 36 36"
+                >
+                  <path
+                    d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                    fill="none"
+                    stroke="rgba(255,255,255,0.1)"
+                    strokeWidth={2}
+                  />
+                  <path
+                    d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                    fill="none"
+                    stroke="url(#gradient-purple)"
+                    strokeWidth={2}
+                    strokeDasharray={`${
+                      animatedStats ? (stats.totalHours / 200) * 100 : 0
+                    }, 100`}
+                    strokeLinecap="round"
+                  />
+                </svg>
+                <div className="absolute inset-0 flex items-center justify-center">
+                  <Clock className="h-4 w-4 text-purple-400" />
+                </div>
+              </div>
+              <div className="text-white font-bold text-lg mb-1">
+                {animatedStats ? stats.totalHours : 0}
+              </div>
+              <p className="text-purple-300 text-xs">Часов</p>
+            </div>
+          </div>
+
+          <div className="relative group">
+            <div className="absolute inset-0 bg-gradient-to-r from-green-500 to-emerald-500 rounded-xl opacity-20 group-hover:opacity-30 transition-opacity blur-sm"></div>
+            <div className="relative glass-card p-3 rounded-xl border border-green-500/30 hover:border-green-400/50 transition-all duration-300 text-center">
+              <div className="relative w-10 h-10 mx-auto mb-2">
+                <svg
+                  className="w-10 h-10 transform -rotate-90"
+                  viewBox="0 0 36 36"
+                >
+                  <path
+                    d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                    fill="none"
+                    stroke="rgba(255,255,255,0.1)"
+                    strokeWidth={2}
+                  />
+                  <path
+                    d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                    fill="none"
+                    stroke="url(#gradient-green)"
+                    strokeWidth={2}
+                    strokeDasharray={`${
+                      animatedStats ? (stats.workDays / 25) * 100 : 0
+                    }, 100`}
+                    strokeLinecap="round"
+                  />
+                </svg>
+                <div className="absolute inset-0 flex items-center justify-center">
+                  <CheckCircle className="h-4 w-4 text-green-400" />
+                </div>
+              </div>
+              <div className="text-white font-bold text-lg mb-1">
+                {animatedStats ? stats.workDays : 0}
+              </div>
+              <p className="text-green-300 text-xs">Рабочих</p>
+            </div>
+          </div>
+
+          <div className="relative group">
+            <div className="absolute inset-0 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-xl opacity-20 group-hover:opacity-30 transition-opacity blur-sm"></div>
+            <div className="relative glass-card p-3 rounded-xl border border-blue-500/30 hover:border-blue-400/50 transition-all duration-300 text-center">
+              <div className="relative w-10 h-10 mx-auto mb-2">
+                <svg
+                  className="w-10 h-10 transform -rotate-90"
+                  viewBox="0 0 36 36"
+                >
+                  <path
+                    d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                    fill="none"
+                    stroke="rgba(255,255,255,0.1)"
+                    strokeWidth={2}
+                  />
+                  <path
+                    d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                    fill="none"
+                    stroke="url(#gradient-blue)"
+                    strokeWidth={2}
+                    strokeDasharray={`${
+                      animatedStats ? (stats.vacation / 5) * 100 : 0
+                    }, 100`}
+                    strokeLinecap="round"
+                  />
+                </svg>
+                <div className="absolute inset-0 flex items-center justify-center">
+                  <Plane className="h-4 w-4 text-blue-400" />
+                </div>
+              </div>
+              <div className="text-white font-bold text-lg mb-1">
+                {animatedStats ? stats.vacation : 0}
+              </div>
+              <p className="text-blue-300 text-xs">Отпуск</p>
+            </div>
+          </div>
+
+          <div className="relative group">
+            <div className="absolute inset-0 bg-gradient-to-r from-orange-500 to-red-500 rounded-xl opacity-20 group-hover:opacity-30 transition-opacity blur-sm"></div>
+            <div className="relative glass-card p-3 rounded-xl border border-orange-500/30 hover:border-orange-400/50 transition-all duration-300 text-center">
+              <div className="relative w-10 h-10 mx-auto mb-2">
+                <svg
+                  className="w-10 h-10 transform -rotate-90"
+                  viewBox="0 0 36 36"
+                >
+                  <path
+                    d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                    fill="none"
+                    stroke="rgba(255,255,255,0.1)"
+                    strokeWidth={2}
+                  />
+                  <path
+                    d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                    fill="none"
+                    stroke="url(#gradient-orange)"
+                    strokeWidth={2}
+                    strokeDasharray={`${
+                      animatedStats ? (stats.sick / 3) * 100 : 0
+                    }, 100`}
+                    strokeLinecap="round"
+                  />
+                </svg>
+                <div className="absolute inset-0 flex items-center justify-center">
+                  <Heart className="h-4 w-4 text-orange-400" />
+                </div>
+              </div>
+              <div className="text-white font-bold text-lg mb-1">
+                {animatedStats ? stats.sick : 0}
+              </div>
+              <p className="text-orange-300 text-xs">Больничный</p>
+            </div>
+          </div>
+
+          <div className="relative group">
+            <div className="absolute inset-0 bg-gradient-to-r from-yellow-500 to-orange-500 rounded-xl opacity-20 group-hover:opacity-30 transition-opacity blur-sm"></div>
+            <div className="relative glass-card p-3 rounded-xl border border-yellow-500/30 hover:border-yellow-400/50 transition-all duration-300 text-center">
+              <div className="relative w-10 h-10 mx-auto mb-2">
+                <svg
+                  className="w-10 h-10 transform -rotate-90"
+                  viewBox="0 0 36 36"
+                >
+                  <path
+                    d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                    fill="none"
+                    stroke="rgba(255,255,255,0.1)"
+                    strokeWidth={2}
+                  />
+                  <path
+                    d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                    fill="none"
+                    stroke="url(#gradient-yellow)"
+                    strokeWidth={2}
+                    strokeDasharray={`${
+                      animatedStats ? (stats.overtime / 20) * 100 : 0
+                    }, 100`}
+                    strokeLinecap="round"
+                  />
+                </svg>
+                <div className="absolute inset-0 flex items-center justify-center">
+                  <Zap className="h-4 w-4 text-yellow-400" />
+                </div>
+              </div>
+              <div className="text-white font-bold text-lg mb-1">
+                {animatedStats ? stats.overtime : 0}
+              </div>
+              <p className="text-yellow-300 text-xs">Переработка</p>
+            </div>
+          </div>
+
+          <div className="relative group">
+            <div className="absolute inset-0 bg-gradient-to-r from-pink-500 to-purple-500 rounded-xl opacity-20 group-hover:opacity-30 transition-opacity blur-sm"></div>
+            <div className="relative glass-card p-3 rounded-xl border border-pink-500/30 hover:border-pink-400/50 transition-all duration-300 text-center">
+              <div className="relative w-10 h-10 mx-auto mb-2">
+                <svg
+                  className="w-10 h-10 transform -rotate-90"
+                  viewBox="0 0 36 36"
+                >
+                  <path
+                    d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                    fill="none"
+                    stroke="rgba(255,255,255,0.1)"
+                    strokeWidth={2}
+                  />
+                  <path
+                    d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                    fill="none"
+                    stroke="url(#gradient-pink)"
+                    strokeWidth={2}
+                    strokeDasharray={`${
+                      animatedStats ? stats.avgEfficiency : 0
+                    }, 100`}
+                    strokeLinecap="round"
+                  />
+                </svg>
+                <div className="absolute inset-0 flex items-center justify-center">
+                  <Activity className="h-4 w-4 text-pink-400" />
+                </div>
+              </div>
+              <div className="text-white font-bold text-lg mb-1">
+                {animatedStats ? stats.avgEfficiency : 0}%
+              </div>
+              <p className="text-pink-300 text-xs">КПД</p>
+            </div>
+          </div>
+        </div>
+
+        {/* Компактная календарная сетка */}
+        <div className="space-y-3">
+          {/* Заголовки дней недели */}
+          <div className="grid grid-cols-7 gap-2 text-center text-xs text-white/60 font-medium">
+            <div>ПН</div>
+            <div>ВТ</div>
+            <div>СР</div>
+            <div>ЧТ</div>
+            <div>ПТ</div>
+            <div>СБ</div>
+            <div>ВС</div>
+          </div>
+
+          {/* Календарная сетка */}
+          <div className="grid grid-cols-7 gap-2">
+            {calendarData.map((day, index) => (
+              <div
+                key={index}
+                className={`relative group cursor-pointer transition-all duration-300 ${
+                  day.status === "work"
+                    ? "bg-gradient-to-br from-emerald-500/20 to-green-500/20 border-emerald-500/30 hover:border-emerald-400/50"
+                    : day.status === "weekend"
+                    ? "bg-gradient-to-br from-slate-500/20 to-gray-500/20 border-slate-500/30 hover:border-slate-400/50"
+                    : day.status === "vacation"
+                    ? "bg-gradient-to-br from-blue-500/20 to-cyan-500/20 border-blue-500/30 hover:border-blue-400/50"
+                    : day.status === "sick"
+                    ? "bg-gradient-to-br from-amber-500/20 to-orange-500/20 border-amber-500/30 hover:border-amber-400/50"
+                    : "bg-gradient-to-br from-red-500/20 to-rose-500/20 border-red-500/30 hover:border-red-400/50"
+                } rounded-xl border backdrop-blur-sm p-2 h-16`}
+              >
+                <div className="flex flex-col items-center justify-center h-full">
+                  <span className="text-white font-medium text-sm mb-1">
+                    {day.day}
+                  </span>
+
+                  {day.status === "work" && (
+                    <div className="flex items-center space-x-1 text-xs">
+                      <span className="text-white/80">{day.hours}ч</span>
+                      {day.overtime > 0 && (
+                        <span className="text-yellow-400">+{day.overtime}</span>
+                      )}
+                    </div>
+                  )}
+
+                  {day.status !== "work" && day.status !== "weekend" && (
+                    <div className="flex justify-center">
+                      <div
+                        className={`w-1.5 h-1.5 rounded-full ${
+                          day.status === "vacation"
+                            ? "bg-gradient-to-r from-blue-500 to-cyan-500"
+                            : day.status === "sick"
+                            ? "bg-gradient-to-r from-amber-500 to-orange-500"
+                            : "bg-gradient-to-r from-red-500 to-rose-500"
+                        }`}
+                      ></div>
+                    </div>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Компактная легенда */}
+        <div className="flex flex-wrap gap-2 text-xs justify-center">
+          <div className="flex items-center gap-1 bg-white/5 px-2 py-1 rounded-lg">
+            <div className="w-2 h-2 rounded-full bg-gradient-to-r from-emerald-500 to-green-500"></div>
+            <span className="text-white/70">Работа</span>
+          </div>
+          <div className="flex items-center gap-1 bg-white/5 px-2 py-1 rounded-lg">
+            <div className="w-2 h-2 rounded-full bg-gradient-to-r from-slate-500 to-gray-500"></div>
+            <span className="text-white/70">Выходной</span>
+          </div>
+          <div className="flex items-center gap-1 bg-white/5 px-2 py-1 rounded-lg">
+            <div className="w-2 h-2 rounded-full bg-gradient-to-r from-blue-500 to-cyan-500"></div>
+            <span className="text-white/70">Отпуск</span>
+          </div>
+          <div className="flex items-center gap-1 bg-white/5 px-2 py-1 rounded-lg">
+            <div className="w-2 h-2 rounded-full bg-gradient-to-r from-amber-500 to-orange-500"></div>
+            <span className="text-white/70">Больничный</span>
+          </div>
+          <div className="flex items-center gap-1 bg-white/5 px-2 py-1 rounded-lg">
+            <div className="w-2 h-2 rounded-full bg-gradient-to-r from-red-500 to-rose-500"></div>
+            <span className="text-white/70">Прогул</span>
+          </div>
+        </div>
+      </CardContent>
+
+      {/* SVG градиенты */}
+      <svg width="0" height="0">
+        <defs>
+          <linearGradient
+            id="gradient-purple"
+            x1="0%"
+            y1="0%"
+            x2="100%"
+            y2="100%"
+          >
+            <stop offset="0%" stopColor="#8B5CF6" />
+            <stop offset="100%" stopColor="#6366F1" />
+          </linearGradient>
+          <linearGradient
+            id="gradient-green"
+            x1="0%"
+            y1="0%"
+            x2="100%"
+            y2="100%"
+          >
+            <stop offset="0%" stopColor="#10B981" />
+            <stop offset="100%" stopColor="#059669" />
+          </linearGradient>
+          <linearGradient
+            id="gradient-blue"
+            x1="0%"
+            y1="0%"
+            x2="100%"
+            y2="100%"
+          >
+            <stop offset="0%" stopColor="#3B82F6" />
+            <stop offset="100%" stopColor="#06B6D4" />
+          </linearGradient>
+          <linearGradient
+            id="gradient-orange"
+            x1="0%"
+            y1="0%"
+            x2="100%"
+            y2="100%"
+          >
+            <stop offset="0%" stopColor="#F59E0B" />
+            <stop offset="100%" stopColor="#F97316" />
+          </linearGradient>
+          <linearGradient
+            id="gradient-yellow"
+            x1="0%"
+            y1="0%"
+            x2="100%"
+            y2="100%"
+          >
+            <stop offset="0%" stopColor="#EAB308" />
+            <stop offset="100%" stopColor="#F59E0B" />
+          </linearGradient>
+          <linearGradient
+            id="gradient-pink"
+            x1="0%"
+            y1="0%"
+            x2="100%"
+            y2="100%"
+          >
+            <stop offset="0%" stopColor="#EC4899" />
+            <stop offset="100%" stopColor="#F43F5E" />
+          </linearGradient>
+        </defs>
+      </svg>
+    </Card>
+  );
+
+  // Интерактивный вариант с яркими цветами и кликабельными датами
+  const renderInteractiveVariant = () => (
+    <Card
+      className="glass-card border-white/10 overflow-hidden relative"
+      style={{ height: "600px" }}
+    >
+      {/* Космический фон с плавающими частицами и звездным полем */}
+      <div className="absolute inset-0 bg-gradient-to-br from-purple-800/30 via-blue-800/30 to-indigo-800/30">
+        <div
+          className="absolute inset-0 opacity-60"
+          style={{
+            backgroundImage:
+              'url(\'data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="0.08"%3E%3Ccircle cx="7" cy="7" r="1"/%3E%3Ccircle cx="27" cy="27" r="1"/%3E%3Ccircle cx="47" cy="47" r="1"/%3E%3Ccircle cx="17" cy="37" r="1"/%3E%3Ccircle cx="37" cy="17" r="1"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E\')',
+          }}
+        ></div>
+
+        {/* Более яркие плавающие частицы */}
+        <div className="absolute top-10 left-10 w-3 h-3 bg-purple-400/50 rounded-full animate-pulse"></div>
+        <div className="absolute top-20 right-20 w-2 h-2 bg-blue-400/60 rounded-full animate-pulse delay-1000"></div>
+        <div className="absolute bottom-20 left-20 w-2.5 h-2.5 bg-cyan-400/50 rounded-full animate-pulse delay-2000"></div>
+        <div className="absolute bottom-32 right-32 w-2 h-2 bg-pink-400/60 rounded-full animate-pulse delay-3000"></div>
+
+        {/* Более яркое звездное поле */}
+        <div className="absolute inset-0">
+          {Array.from({ length: 20 }).map((_, i) => (
+            <div
+              key={i}
+              className="absolute w-1 h-1 bg-white/60 rounded-full animate-pulse"
+              style={{
+                top: `${Math.random() * 100}%`,
+                left: `${Math.random() * 100}%`,
+                animationDelay: `${Math.random() * 3}s`,
+                animationDuration: `${2 + Math.random() * 2}s`,
+              }}
+            />
+          ))}
+        </div>
+      </div>
+
+      <CardContent className="space-y-4 relative z-10 p-4 h-full overflow-y-auto">
+        {/* Компактный заголовок сотрудника с яркими цветами */}
+        <div className="bg-white/10 rounded-xl p-4 backdrop-blur-sm border border-white/20 shadow-lg">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center space-x-4">
+              <Avatar className="h-12 w-12 ring-3 ring-purple-400/50">
+                <AvatarImage src={currentEmployee.avatar} />
+                <AvatarFallback className="bg-gradient-to-br from-purple-500 to-blue-500 text-white text-sm font-bold">
+                  {currentEmployee.name
+                    .split(" ")
+                    .map((n) => n[0])
+                    .join("")}
+                </AvatarFallback>
+              </Avatar>
+
+              <div className="flex-1">
+                <h3 className="text-lg font-bold text-white mb-1">
+                  {currentEmployee.name}
+                </h3>
+                <p className="text-purple-200 text-sm mb-1">
+                  {currentEmployee.position}
+                </p>
+                <div className="flex items-center space-x-3 text-xs text-white/80">
+                  <span>{currentEmployee.department}</span>
+                  <span>•</span>
+                  <span>{currentEmployee.level}</span>
+                </div>
+              </div>
+            </div>
+
+            {/* Компактная навигация с яркими цветами */}
+            <div className="flex items-center space-x-2">
+              <Select
+                value={selectedEmployee}
+                onValueChange={setSelectedEmployee}
+              >
+                <SelectTrigger className="w-32 bg-white/15 border-white/40 text-white text-xs">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {employees.map((emp) => (
+                    <SelectItem key={emp.id} value={emp.id}>
+                      {emp.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+
+              <Button
+                variant="ghost"
+                size="sm"
+                className="text-white/80 hover:text-white hover:bg-white/20 h-8 w-8 p-0"
+              >
+                <Settings className="h-4 w-4" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="text-white/80 hover:text-white hover:bg-white/20 h-8 w-8 p-0"
+              >
+                <Download className="h-4 w-4" />
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        {/* Яркая статистика в одну строку */}
+        <div className="grid grid-cols-6 gap-2">
+          <div className="relative group">
+            <div className="absolute inset-0 bg-gradient-to-r from-purple-400 to-indigo-400 rounded-xl opacity-30 group-hover:opacity-40 transition-opacity blur-sm"></div>
+            <div className="relative glass-card p-3 rounded-xl border border-purple-400/50 hover:border-purple-300/70 transition-all duration-300 text-center">
+              <div className="relative w-10 h-10 mx-auto mb-2">
+                <svg
+                  className="w-10 h-10 transform -rotate-90"
+                  viewBox="0 0 36 36"
+                >
+                  <path
+                    d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                    fill="none"
+                    stroke="rgba(255,255,255,0.2)"
+                    strokeWidth={2}
+                  />
+                  <path
+                    d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                    fill="none"
+                    stroke="url(#gradient-purple-bright)"
+                    strokeWidth={2}
+                    strokeDasharray={`${
+                      animatedStats
+                        ? (interactiveStats.totalHours / 200) * 100
+                        : 0
+                    }, 100`}
+                    strokeLinecap="round"
+                  />
+                </svg>
+                <div className="absolute inset-0 flex items-center justify-center">
+                  <Clock className="h-4 w-4 text-purple-300" />
+                </div>
+              </div>
+              <div className="text-white font-bold text-lg mb-1">
+                {animatedStats ? interactiveStats.totalHours : 0}
+              </div>
+              <p className="text-purple-200 text-xs">Часов</p>
+            </div>
+          </div>
+
+          <div className="relative group">
+            <div className="absolute inset-0 bg-gradient-to-r from-green-400 to-emerald-400 rounded-xl opacity-30 group-hover:opacity-40 transition-opacity blur-sm"></div>
+            <div className="relative glass-card p-3 rounded-xl border border-green-400/50 hover:border-green-300/70 transition-all duration-300 text-center">
+              <div className="relative w-10 h-10 mx-auto mb-2">
+                <svg
+                  className="w-10 h-10 transform -rotate-90"
+                  viewBox="0 0 36 36"
+                >
+                  <path
+                    d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                    fill="none"
+                    stroke="rgba(255,255,255,0.2)"
+                    strokeWidth={2}
+                  />
+                  <path
+                    d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                    fill="none"
+                    stroke="url(#gradient-green-bright)"
+                    strokeWidth={2}
+                    strokeDasharray={`${
+                      animatedStats ? (interactiveStats.workDays / 25) * 100 : 0
+                    }, 100`}
+                    strokeLinecap="round"
+                  />
+                </svg>
+                <div className="absolute inset-0 flex items-center justify-center">
+                  <CheckCircle className="h-4 w-4 text-green-300" />
+                </div>
+              </div>
+              <div className="text-white font-bold text-lg mb-1">
+                {animatedStats ? interactiveStats.workDays : 0}
+              </div>
+              <p className="text-green-200 text-xs">Рабочих</p>
+            </div>
+          </div>
+
+          <div className="relative group">
+            <div className="absolute inset-0 bg-gradient-to-r from-blue-400 to-cyan-400 rounded-xl opacity-30 group-hover:opacity-40 transition-opacity blur-sm"></div>
+            <div className="relative glass-card p-3 rounded-xl border border-blue-400/50 hover:border-blue-300/70 transition-all duration-300 text-center">
+              <div className="relative w-10 h-10 mx-auto mb-2">
+                <svg
+                  className="w-10 h-10 transform -rotate-90"
+                  viewBox="0 0 36 36"
+                >
+                  <path
+                    d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                    fill="none"
+                    stroke="rgba(255,255,255,0.2)"
+                    strokeWidth={2}
+                  />
+                  <path
+                    d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                    fill="none"
+                    stroke="url(#gradient-blue-bright)"
+                    strokeWidth={2}
+                    strokeDasharray={`${
+                      animatedStats ? (interactiveStats.vacation / 5) * 100 : 0
+                    }, 100`}
+                    strokeLinecap="round"
+                  />
+                </svg>
+                <div className="absolute inset-0 flex items-center justify-center">
+                  <Plane className="h-4 w-4 text-blue-300" />
+                </div>
+              </div>
+              <div className="text-white font-bold text-lg mb-1">
+                {animatedStats ? interactiveStats.vacation : 0}
+              </div>
+              <p className="text-blue-200 text-xs">Отпуск</p>
+            </div>
+          </div>
+
+          <div className="relative group">
+            <div className="absolute inset-0 bg-gradient-to-r from-orange-400 to-red-400 rounded-xl opacity-30 group-hover:opacity-40 transition-opacity blur-sm"></div>
+            <div className="relative glass-card p-3 rounded-xl border border-orange-400/50 hover:border-orange-300/70 transition-all duration-300 text-center">
+              <div className="relative w-10 h-10 mx-auto mb-2">
+                <svg
+                  className="w-10 h-10 transform -rotate-90"
+                  viewBox="0 0 36 36"
+                >
+                  <path
+                    d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                    fill="none"
+                    stroke="rgba(255,255,255,0.2)"
+                    strokeWidth={2}
+                  />
+                  <path
+                    d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                    fill="none"
+                    stroke="url(#gradient-orange-bright)"
+                    strokeWidth={2}
+                    strokeDasharray={`${
+                      animatedStats ? (interactiveStats.sick / 3) * 100 : 0
+                    }, 100`}
+                    strokeLinecap="round"
+                  />
+                </svg>
+                <div className="absolute inset-0 flex items-center justify-center">
+                  <Heart className="h-4 w-4 text-orange-300" />
+                </div>
+              </div>
+              <div className="text-white font-bold text-lg mb-1">
+                {animatedStats ? interactiveStats.sick : 0}
+              </div>
+              <p className="text-orange-200 text-xs">Больничный</p>
+            </div>
+          </div>
+
+          <div className="relative group">
+            <div className="absolute inset-0 bg-gradient-to-r from-yellow-400 to-orange-400 rounded-xl opacity-30 group-hover:opacity-40 transition-opacity blur-sm"></div>
+            <div className="relative glass-card p-3 rounded-xl border border-yellow-400/50 hover:border-yellow-300/70 transition-all duration-300 text-center">
+              <div className="relative w-10 h-10 mx-auto mb-2">
+                <svg
+                  className="w-10 h-10 transform -rotate-90"
+                  viewBox="0 0 36 36"
+                >
+                  <path
+                    d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                    fill="none"
+                    stroke="rgba(255,255,255,0.2)"
+                    strokeWidth={2}
+                  />
+                  <path
+                    d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                    fill="none"
+                    stroke="url(#gradient-yellow-bright)"
+                    strokeWidth={2}
+                    strokeDasharray={`${
+                      animatedStats ? (interactiveStats.overtime / 20) * 100 : 0
+                    }, 100`}
+                    strokeLinecap="round"
+                  />
+                </svg>
+                <div className="absolute inset-0 flex items-center justify-center">
+                  <Zap className="h-4 w-4 text-yellow-300" />
+                </div>
+              </div>
+              <div className="text-white font-bold text-lg mb-1">
+                {animatedStats ? interactiveStats.overtime : 0}
+              </div>
+              <p className="text-yellow-200 text-xs">Переработка</p>
+            </div>
+          </div>
+
+          <div className="relative group">
+            <div className="absolute inset-0 bg-gradient-to-r from-pink-400 to-purple-400 rounded-xl opacity-30 group-hover:opacity-40 transition-opacity blur-sm"></div>
+            <div className="relative glass-card p-3 rounded-xl border border-pink-400/50 hover:border-pink-300/70 transition-all duration-300 text-center">
+              <div className="relative w-10 h-10 mx-auto mb-2">
+                <svg
+                  className="w-10 h-10 transform -rotate-90"
+                  viewBox="0 0 36 36"
+                >
+                  <path
+                    d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                    fill="none"
+                    stroke="rgba(255,255,255,0.2)"
+                    strokeWidth={2}
+                  />
+                  <path
+                    d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                    fill="none"
+                    stroke="url(#gradient-pink-bright)"
+                    strokeWidth={2}
+                    strokeDasharray={`${
+                      animatedStats ? interactiveStats.avgEfficiency : 0
+                    }, 100`}
+                    strokeLinecap="round"
+                  />
+                </svg>
+                <div className="absolute inset-0 flex items-center justify-center">
+                  <Activity className="h-4 w-4 text-pink-300" />
+                </div>
+              </div>
+              <div className="text-white font-bold text-lg mb-1">
+                {animatedStats ? interactiveStats.avgEfficiency : 0}%
+              </div>
+              <p className="text-pink-200 text-xs">КПД</p>
+            </div>
+          </div>
+        </div>
+
+        {/* Интерактивная календарная сетка с яркими цветами */}
+        <div className="space-y-3">
+          {/* Заголовки дней недели */}
+          <div className="grid grid-cols-7 gap-2 text-center text-xs text-white/80 font-medium">
+            <div>ПН</div>
+            <div>ВТ</div>
+            <div>СР</div>
+            <div>ЧТ</div>
+            <div>ПТ</div>
+            <div>СБ</div>
+            <div>ВС</div>
+          </div>
+
+          {/* Интерактивная календарная сетка */}
+          <div className="grid grid-cols-7 gap-2">
+            {editableCalendarData.map((day, index) => (
+              <div
+                key={index}
+                onClick={() => toggleDayStatus(index)}
+                className={`relative group cursor-pointer transition-all duration-300 transform hover:scale-105 ${
+                  day.status === "work"
+                    ? "bg-gradient-to-br from-emerald-400/30 to-green-400/30 border-emerald-400/50 hover:border-emerald-300/70 shadow-lg shadow-emerald-500/20"
+                    : day.status === "weekend"
+                    ? "bg-gradient-to-br from-slate-400/30 to-gray-400/30 border-slate-400/50 hover:border-slate-300/70 shadow-lg shadow-slate-500/20"
+                    : day.status === "vacation"
+                    ? "bg-gradient-to-br from-blue-400/30 to-cyan-400/30 border-blue-400/50 hover:border-blue-300/70 shadow-lg shadow-blue-500/20"
+                    : day.status === "sick"
+                    ? "bg-gradient-to-br from-amber-400/30 to-orange-400/30 border-amber-400/50 hover:border-amber-300/70 shadow-lg shadow-amber-500/20"
+                    : "bg-gradient-to-br from-red-400/30 to-rose-400/30 border-red-400/50 hover:border-red-300/70 shadow-lg shadow-red-500/20"
+                } rounded-xl border backdrop-blur-sm p-2 h-16`}
+              >
+                <div className="flex flex-col items-center justify-center h-full">
+                  <span className="text-white font-medium text-sm mb-1">
+                    {day.day}
+                  </span>
+
+                  {day.status === "work" && (
+                    <div className="flex items-center space-x-1 text-xs">
+                      <span className="text-white/90">{day.hours}ч</span>
+                      {day.overtime > 0 && (
+                        <span className="text-yellow-300">+{day.overtime}</span>
+                      )}
+                    </div>
+                  )}
+
+                  {day.status !== "work" && day.status !== "weekend" && (
+                    <div className="flex justify-center">
+                      <div
+                        className={`w-2 h-2 rounded-full ${
+                          day.status === "vacation"
+                            ? "bg-gradient-to-r from-blue-400 to-cyan-400"
+                            : day.status === "sick"
+                            ? "bg-gradient-to-r from-amber-400 to-orange-400"
+                            : "bg-gradient-to-r from-red-400 to-rose-400"
+                        }`}
+                      ></div>
+                    </div>
+                  )}
+                </div>
+
+                {/* Индикатор интерактивности */}
+                <div className="absolute top-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                  <div className="w-1.5 h-1.5 bg-white/60 rounded-full animate-pulse"></div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Яркая легенда с подсказкой */}
+        <div className="space-y-2">
+          <div className="flex flex-wrap gap-2 text-xs justify-center">
+            <div className="flex items-center gap-1 bg-white/10 px-2 py-1 rounded-lg border border-emerald-400/30">
+              <div className="w-2 h-2 rounded-full bg-gradient-to-r from-emerald-400 to-green-400"></div>
+              <span className="text-white/80">Работа</span>
+            </div>
+            <div className="flex items-center gap-1 bg-white/10 px-2 py-1 rounded-lg border border-slate-400/30">
+              <div className="w-2 h-2 rounded-full bg-gradient-to-r from-slate-400 to-gray-400"></div>
+              <span className="text-white/80">Выходной</span>
+            </div>
+            <div className="flex items-center gap-1 bg-white/10 px-2 py-1 rounded-lg border border-blue-400/30">
+              <div className="w-2 h-2 rounded-full bg-gradient-to-r from-blue-400 to-cyan-400"></div>
+              <span className="text-white/80">Отпуск</span>
+            </div>
+            <div className="flex items-center gap-1 bg-white/10 px-2 py-1 rounded-lg border border-amber-400/30">
+              <div className="w-2 h-2 rounded-full bg-gradient-to-r from-amber-400 to-orange-400"></div>
+              <span className="text-white/80">Больничный</span>
+            </div>
+            <div className="flex items-center gap-1 bg-white/10 px-2 py-1 rounded-lg border border-red-400/30">
+              <div className="w-2 h-2 rounded-full bg-gradient-to-r from-red-400 to-rose-400"></div>
+              <span className="text-white/80">Прогул</span>
+            </div>
+          </div>
+          <div className="text-center text-xs text-white/60">
+            💡 Кликните на дату, чтобы изменить статус
+          </div>
+        </div>
+      </CardContent>
+
+      {/* Яркие SVG градиенты */}
+      <svg width="0" height="0">
+        <defs>
+          <linearGradient
+            id="gradient-purple-bright"
+            x1="0%"
+            y1="0%"
+            x2="100%"
+            y2="100%"
+          >
+            <stop offset="0%" stopColor="#A855F7" />
+            <stop offset="100%" stopColor="#7C3AED" />
+          </linearGradient>
+          <linearGradient
+            id="gradient-green-bright"
+            x1="0%"
+            y1="0%"
+            x2="100%"
+            y2="100%"
+          >
+            <stop offset="0%" stopColor="#34D399" />
+            <stop offset="100%" stopColor="#10B981" />
+          </linearGradient>
+          <linearGradient
+            id="gradient-blue-bright"
+            x1="0%"
+            y1="0%"
+            x2="100%"
+            y2="100%"
+          >
+            <stop offset="0%" stopColor="#60A5FA" />
+            <stop offset="100%" stopColor="#22D3EE" />
+          </linearGradient>
+          <linearGradient
+            id="gradient-orange-bright"
+            x1="0%"
+            y1="0%"
+            x2="100%"
+            y2="100%"
+          >
+            <stop offset="0%" stopColor="#FB923C" />
+            <stop offset="100%" stopColor="#F87171" />
+          </linearGradient>
+          <linearGradient
+            id="gradient-yellow-bright"
+            x1="0%"
+            y1="0%"
+            x2="100%"
+            y2="100%"
+          >
+            <stop offset="0%" stopColor="#FBBF24" />
+            <stop offset="100%" stopColor="#FB923C" />
+          </linearGradient>
+          <linearGradient
+            id="gradient-pink-bright"
+            x1="0%"
+            y1="0%"
+            x2="100%"
+            y2="100%"
+          >
+            <stop offset="0%" stopColor="#F472B6" />
+            <stop offset="100%" stopColor="#F87171" />
+          </linearGradient>
+        </defs>
+      </svg>
+    </Card>
+  );
+
+  // Интерактивный вариант для нескольких сотрудников с яркими цветами
+  const renderMultiEmployeeInteractiveVariant = () => {
+
+    const daysInMonth = new Date(selectedYear, selectedMonth + 1, 0).getDate();
+
+    return (
+      <div className="space-y-6">
+        {/* Заголовок */}
+        <Card className="glass-card border-white/10 overflow-hidden relative">
+          <div className="absolute inset-0 bg-gradient-to-br from-purple-900/30 via-pink-900/30 to-cyan-900/30">
+            <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-purple-600/20 via-pink-600/10 to-transparent"></div>
+          </div>
+
+          <CardHeader className="relative z-10">
+            <div className="flex items-center justify-between">
+              <div>
+                <h2 className="text-3xl font-bold bg-gradient-to-r from-cyan-400 via-purple-400 to-pink-400 bg-clip-text text-transparent mb-2">
+                  Универсальный табель учета рабочего времени
+                </h2>
+                <p className="text-white/70 text-lg">
+                  {monthNames[selectedMonth]} {selectedYear} •{" "}
+                  {employeesList.length} сотрудников
+                </p>
+              </div>
+
+              <div className="flex items-center space-x-4">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => {
+                    if (selectedMonth === 0) {
+                      setSelectedMonth(11);
+                      setSelectedYear(selectedYear - 1);
+                    } else {
+                      setSelectedMonth(selectedMonth - 1);
+                    }
+                  }}
+                  className="text-white hover:bg-white/10 rounded-xl border border-cyan-400/30 hover:border-cyan-400/50"
+                >
+                  <ChevronLeft className="h-5 w-5" />
+                </Button>
+
+                <div className="text-white font-bold text-xl min-w-[180px] text-center bg-gradient-to-r from-cyan-400 to-pink-400 bg-clip-text text-transparent">
+                  {monthNames[selectedMonth]} {selectedYear}
+                </div>
+
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => {
+                    if (selectedMonth === 11) {
+                      setSelectedMonth(0);
+                      setSelectedYear(selectedYear + 1);
+                    } else {
+                      setSelectedMonth(selectedMonth + 1);
+                    }
+                  }}
+                  className="text-white hover:bg-white/10 rounded-xl border border-pink-400/30 hover:border-pink-400/50"
+                >
+                  <ChevronRight className="h-5 w-5" />
+                </Button>
+
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => setShowAddForm(!showAddForm)}
+                  className="text-white hover:bg-white/10 rounded-xl border border-green-400/30 hover:border-green-400/50"
+                >
+                  <Plus className="h-4 w-4 mr-2" />
+                  Добавить сотрудника
+                </Button>
+
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="text-white hover:bg-white/10 rounded-xl border border-purple-400/30 hover:border-purple-400/50"
+                >
+                  <Download className="h-4 w-4 mr-2" />
+                  Экспорт
+                </Button>
+              </div>
+            </div>
+
+            {/* Форма добавления сотрудника */}
+            {showAddForm && (
+              <div className="mt-6 p-4 bg-white/5 rounded-xl border border-white/10">
+                <h3 className="text-white font-semibold mb-4">
+                  Добавить нового сотрудника
+                </h3>
+                <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                  <input
+                    type="text"
+                    placeholder="Имя Фамилия"
+                    value={newEmployee.name}
+                    onChange={(e) =>
+                      setNewEmployee({ ...newEmployee, name: e.target.value })
+                    }
+                    className="px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:outline-none focus:border-cyan-400/50"
+                  />
+                  <input
+                    type="text"
+                    placeholder="Должность"
+                    value={newEmployee.position}
+                    onChange={(e) =>
+                      setNewEmployee({
+                        ...newEmployee,
+                        position: e.target.value,
+                      })
+                    }
+                    className="px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:outline-none focus:border-cyan-400/50"
+                  />
+                  <input
+                    type="text"
+                    placeholder="Отдел"
+                    value={newEmployee.department}
+                    onChange={(e) =>
+                      setNewEmployee({
+                        ...newEmployee,
+                        department: e.target.value,
+                      })
+                    }
+                    className="px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:outline-none focus:border-cyan-400/50"
+                  />
+                  <select
+                    value={newEmployee.level}
+                    onChange={(e) =>
+                      setNewEmployee({ ...newEmployee, level: e.target.value })
+                    }
+                    className="px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:border-cyan-400/50"
+                  >
+                    <option value="Junior" className="bg-gray-900">
+                      Junior
+                    </option>
+                    <option value="Middle" className="bg-gray-900">
+                      Middle
+                    </option>
+                    <option value="Senior" className="bg-gray-900">
+                      Senior
+                    </option>
+                    <option value="Lead" className="bg-gray-900">
+                      Lead
+                    </option>
+                  </select>
+                </div>
+                <div className="flex justify-end space-x-2 mt-4">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => setShowAddForm(false)}
+                    className="text-white/70 hover:text-white hover:bg-white/10"
+                  >
+                    Отмена
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={handleAddEmployee}
+                    className="text-white hover:bg-green-500/20 border border-green-400/30"
+                  >
+                    Добавить
+                  </Button>
+                </div>
+              </div>
+            )}
+          </CardHeader>
+        </Card>
+
+        {/* Основной табель */}
+        <Card className="glass-card border-white/10 overflow-hidden relative">
+          <div className="absolute inset-0 bg-gradient-to-br from-purple-900/20 via-blue-900/20 to-indigo-900/20">
+            <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-purple-600/10 via-pink-600/5 to-transparent"></div>
+          </div>
+
+          <CardContent className="relative z-10 p-6">
+            <div className="overflow-x-auto">
+              <table className="w-full">
+                {/* Заголовок таблицы */}
+                <thead>
+                  <tr>
+                    <th className="text-left p-3 text-white font-semibold border-b border-white/10 sticky left-0 bg-gray-900/80 backdrop-blur min-w-[200px]">
+                      Сотрудник
+                    </th>
+                    {Array.from({ length: daysInMonth }, (_, i) => {
+                      const date = new Date(selectedYear, selectedMonth, i + 1);
+                      const dayOfWeek = date.getDay();
+                      const isWeekend = dayOfWeek === 0 || dayOfWeek === 6;
+                      const workingCount = getWorkingEmployeesCount(i);
+
+                      return (
+                        <th
+                          key={i + 1}
+                          className={`text-center p-2 text-sm border-b border-white/10 min-w-[60px] ${
+                            isWeekend ? "bg-gray-500/20" : ""
+                          }`}
+                        >
+                          <div className="text-white/70 text-xs">
+                            {dayNames[dayOfWeek === 0 ? 6 : dayOfWeek - 1]}
+                          </div>
+                          <div className="text-white font-bold text-lg">
+                            {i + 1}
+                          </div>
+                          {workingCount > 0 && (
+                            <div className="text-green-400 text-xs font-semibold mt-1">
+                              {workingCount} чел.
+                            </div>
+                          )}
+                        </th>
+                      );
+                    })}
+                    <th className="text-center p-3 text-white font-semibold border-b border-white/10 min-w-[100px]">
+                      Итого
+                    </th>
+                  </tr>
+                </thead>
+
+                {/* Строки сотрудников */}
+                <tbody>
+                  {employeesList.map((employee, employeeIndex) => {
+                    const employeeData = allEmployeesData[employee.id] || [];
+                    const totalHours = employeeData.reduce(
+                      (sum, day) => sum + day.hours,
+                      0
+                    );
+                    const workDays = employeeData.filter(
+                      (day) => day.status === "work"
+                    ).length;
+                    const colorGradient = getEmployeeColor(employeeIndex);
+
+                    return (
+                      <tr
+                        key={employee.id}
+                        className="hover:bg-white/5 transition-colors"
+                      >
+                        {/* Информация о сотруднике */}
+                        <td className="p-3 border-b border-white/5 sticky left-0 bg-gray-900/80 backdrop-blur">
+                          <div className="flex items-center justify-between">
+                            <div className="flex items-center space-x-3">
+                              <Avatar
+                                className={`h-10 w-10 ring-2 ring-offset-2 ring-offset-gray-900`}
+                                style={{
+                                  borderColor: `rgb(${
+                                    employeeIndex * 50 + 100
+                                  }, ${200 - employeeIndex * 30}, ${
+                                    150 + employeeIndex * 40
+                                  })`,
+                                }}
+                              >
+                                <AvatarImage src={employee.avatar} />
+                                <AvatarFallback
+                                  className={`bg-gradient-to-br ${colorGradient} text-white text-sm font-bold`}
+                                >
+                                  {employee.name
+                                    .split(" ")
+                                    .map((n) => n[0])
+                                    .join("")}
+                                </AvatarFallback>
+                              </Avatar>
+                              <div>
+                                <div className="text-white font-medium text-sm">
+                                  {employee.name}
+                                </div>
+                                <div className="text-white/60 text-xs">
+                                  {employee.position}
+                                </div>
+                                <div className="text-white/40 text-xs">
+                                  {employee.department}
+                                </div>
+                              </div>
+                            </div>
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              onClick={() => handleRemoveEmployee(employee.id)}
+                              className="text-red-400 hover:text-red-300 hover:bg-red-500/10 p-1 h-6 w-6"
+                            >
+                              <X className="h-3 w-3" />
+                            </Button>
+                          </div>
+                        </td>
+
+                        {/* Дни месяца */}
+                        {employeeData.map((day, dayIndex) => {
+                          const date = new Date(
+                            selectedYear,
+                            selectedMonth,
+                            day.day
+                          );
+                          const isWeekend =
+                            date.getDay() === 0 || date.getDay() === 6;
+
+                          return (
+                            <td
+                              key={dayIndex}
+                              className={`p-1 border-b border-white/5 text-center ${
+                                isWeekend ? "bg-gray-500/10" : ""
+                              }`}
+                            >
+                              <div
+                                className={`
+                                  w-12 h-12 mx-auto rounded-lg flex flex-col items-center justify-center text-xs font-semibold transition-all duration-300 hover:scale-110 cursor-pointer
+                                  ${
+                                    day.status === "work"
+                                      ? "bg-gradient-to-br from-green-500/40 to-emerald-500/40 border border-green-400/50 text-white shadow-lg shadow-green-500/20"
+                                      : ""
+                                  }
+                                  ${
+                                    day.status === "weekend"
+                                      ? "bg-gradient-to-br from-gray-500/30 to-slate-500/30 border border-gray-400/40 text-white/70"
+                                      : ""
+                                  }
+                                  ${
+                                    day.status === "vacation"
+                                      ? "bg-gradient-to-br from-blue-500/40 to-cyan-500/40 border border-blue-400/50 text-white shadow-lg shadow-blue-500/20"
+                                      : ""
+                                  }
+                                  ${
+                                    day.status === "sick"
+                                      ? "bg-gradient-to-br from-orange-500/40 to-red-500/40 border border-orange-400/50 text-white shadow-lg shadow-orange-500/20"
+                                      : ""
+                                  }
+                                  ${
+                                    day.status === "absent"
+                                      ? "bg-gradient-to-br from-red-500/40 to-rose-500/40 border border-red-400/50 text-white shadow-lg shadow-red-500/20"
+                                      : ""
+                                  }
+                                `}
+                              >
+                                {day.status === "work" && (
+                                  <>
+                                    <span className="text-xs font-bold">
+                                      {day.hours}ч
+                                    </span>
+                                    {day.overtime > 0 && (
+                                      <span className="text-yellow-300 text-xs">
+                                        +{day.overtime}
+                                      </span>
+                                    )}
+                                  </>
+                                )}
+                                {day.status === "weekend" && (
+                                  <span className="text-xs">Вых</span>
+                                )}
+                                {day.status === "vacation" && (
+                                  <span className="text-xs">Отп</span>
+                                )}
+                                {day.status === "sick" && (
+                                  <span className="text-xs">Б/Л</span>
+                                )}
+                                {day.status === "absent" && (
+                                  <span className="text-xs">Пр</span>
+                                )}
+                              </div>
+                            </td>
+                          );
+                        })}
+
+                        {/* Итого */}
+                        <td className="p-3 border-b border-white/5 text-center">
+                          <div className="text-white font-bold text-lg">
+                            {totalHours}ч
+                          </div>
+                          <div className="text-white/60 text-xs">
+                            {workDays} дней
+                          </div>
+                        </td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+
+                {/* Итоговая строка */}
+                <tfoot>
+                  <tr className="bg-white/5">
+                    <td className="p-3 text-white font-semibold border-t border-white/10 sticky left-0 bg-gray-800/80 backdrop-blur">
+                      Итого по дням:
+                    </td>
+                    {Array.from({ length: daysInMonth }, (_, dayIndex) => {
+                      const workingCount = getWorkingEmployeesCount(dayIndex);
+                      const totalHours = employeesList.reduce((sum, emp) => {
+                        const dayData = getDayStatus(emp.id, dayIndex);
+                        return sum + (dayData?.hours || 0);
+                      }, 0);
+
+                      return (
+                        <td
+                          key={dayIndex}
+                          className="p-2 text-center border-t border-white/10"
+                        >
+                          {workingCount > 0 && (
+                            <div className="text-white font-bold text-sm">
+                              {totalHours}ч
+                            </div>
+                          )}
+                          {workingCount > 0 && (
+                            <div className="text-green-400 text-xs">
+                              {workingCount} чел
+                            </div>
+                          )}
+                        </td>
+                      );
+                    })}
+                    <td className="p-3 text-center border-t border-white/10">
+                      <div className="text-white font-bold text-lg">
+                        {employeesList.reduce((sum, emp) => {
+                          const empData = allEmployeesData[emp.id] || [];
+                          return (
+                            sum +
+                            empData.reduce(
+                              (daySum, day) => daySum + day.hours,
+                              0
+                            )
+                          );
+                        }, 0)}
+                        ч
+                      </div>
+                    </td>
+                  </tr>
+                </tfoot>
+              </table>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Легенда */}
+        <Card className="glass-card border-white/10">
+          <div className="absolute inset-0 bg-gradient-to-br from-purple-900/20 via-pink-900/20 to-cyan-900/20">
+            <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-purple-600/10 via-pink-600/5 to-transparent"></div>
+          </div>
+
+          <CardContent className="relative z-10 p-6">
+            <h4 className="text-white font-bold text-xl mb-6 text-center bg-gradient-to-r from-cyan-400 via-purple-400 to-pink-400 bg-clip-text text-transparent">
+              Легенда статусов
+            </h4>
+            <div className="grid grid-cols-2 md:grid-cols-5 gap-6">
+              <div className="flex items-center space-x-3 bg-white/5 p-4 rounded-xl border border-green-400/30">
+                <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-green-500/40 to-emerald-500/40 border border-green-400/50 flex items-center justify-center shadow-lg shadow-green-500/20">
+                  <span className="text-white text-xs font-bold">8ч</span>
+                </div>
+                <div>
+                  <span className="text-white font-bold text-sm">Работа</span>
+                  <p className="text-green-300 text-xs">Рабочий день</p>
+                </div>
+              </div>
+
+              <div className="flex items-center space-x-3 bg-white/5 p-4 rounded-xl border border-gray-400/30">
+                <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-gray-500/30 to-slate-500/30 border border-gray-400/40 flex items-center justify-center">
+                  <span className="text-white/70 text-xs font-bold">Вых</span>
+                </div>
+                <div>
+                  <span className="text-white font-bold text-sm">Выходной</span>
+                  <p className="text-gray-300 text-xs">Суббота/Воскресенье</p>
+                </div>
+              </div>
+
+              <div className="flex items-center space-x-3 bg-white/5 p-4 rounded-xl border border-blue-400/30">
+                <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500/40 to-cyan-500/40 border border-blue-400/50 flex items-center justify-center shadow-lg shadow-blue-500/20">
+                  <span className="text-white text-xs font-bold">Отп</span>
+                </div>
+                <div>
+                  <span className="text-white font-bold text-sm">Отпуск</span>
+                  <p className="text-blue-300 text-xs">Оплачиваемый отпуск</p>
+                </div>
+              </div>
+
+              <div className="flex items-center space-x-3 bg-white/5 p-4 rounded-xl border border-orange-400/30">
+                <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-orange-500/40 to-red-500/40 border border-orange-400/50 flex items-center justify-center shadow-lg shadow-orange-500/20">
+                  <span className="text-white text-xs font-bold">Б/Л</span>
+                </div>
+                <div>
+                  <span className="text-white font-bold text-sm">
+                    Больничный
+                  </span>
+                  <p className="text-orange-300 text-xs">По болезни</p>
+                </div>
+              </div>
+
+              <div className="flex items-center space-x-3 bg-white/5 p-4 rounded-xl border border-red-400/30">
+                <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-red-500/40 to-rose-500/40 border border-red-400/50 flex items-center justify-center shadow-lg shadow-red-500/20">
+                  <span className="text-white text-xs font-bold">Пр</span>
+                </div>
+                <div>
+                  <span className="text-white font-bold text-sm">Прогул</span>
+                  <p className="text-red-300 text-xs">Неявка</p>
+                </div>
+              </div>
+            </div>
+
+            <div className="mt-6 text-center text-white/60 text-sm">
+              <p>
+                💡 В заголовках дней показано количество работающих сотрудников
+              </p>
+              <p>
+                📊 В итоговой строке показаны общие часы и количество
+                сотрудников по дням
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Селектор вариантов */}
+      <Card className="glass-card border-white/10">
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <CardTitle className="text-white">
+              Табель учета рабочего времени
+            </CardTitle>
+            <div className="flex items-center space-x-4">
+              <Select
+                value={selectedVariant}
+                onValueChange={(
+                  value:
+                    | "galaxy"
+                    | "cosmic"
+                    | "custom"
+                    | "compact"
+                    | "interactive"
+                    | "multi-employee"
+                ) => setSelectedVariant(value)}
+              >
+                <SelectTrigger className="w-64 glass-input bg-white/10 border-white/20 text-white">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent className="bg-gray-900/95 backdrop-blur border-white/20 text-white">
+                  <SelectItem
+                    value="galaxy"
+                    className="text-white hover:bg-white/10"
+                  >
+                    Галактический стиль
+                  </SelectItem>
+                  <SelectItem
+                    value="cosmic"
+                    className="text-white hover:bg-white/10"
+                  >
+                    Космический стиль
+                  </SelectItem>
+                  <SelectItem
+                    value="custom"
+                    className="text-white hover:bg-white/10"
+                  >
+                    Кастомный стиль
+                  </SelectItem>
+                  <SelectItem
+                    value="compact"
+                    className="text-white hover:bg-white/10"
+                  >
+                    Компактный вид
+                  </SelectItem>
+                  <SelectItem
+                    value="interactive"
+                    className="text-white hover:bg-white/10"
+                  >
+                    Интерактивный режим
+                  </SelectItem>
+                  <SelectItem
+                    value="multi-employee"
+                    className="text-white hover:bg-white/10"
+                  >
+                    Универсальный (несколько сотрудников)
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        </CardHeader>
+      </Card>
+
+      {/* Отображение выбранного варианта */}
+      {selectedVariant === "galaxy" && renderGalaxyVariant()}
+      {selectedVariant === "cosmic" && renderCosmicVariant()}
+      {selectedVariant === "custom" && renderCustomVariant()}
+      {selectedVariant === "compact" && renderCompactVariant()}
+      {selectedVariant === "interactive" && renderInteractiveVariant()}
+      {selectedVariant === "multi-employee" &&
+        renderMultiEmployeeInteractiveVariant()}
+    </div>
+  );
+}