Добавлена кнопка "Сотрудники" в боковую панель для фулфилмент центров, улучшен интерфейс отображения товаров в избранном с изменением стилей на сетку. Перемещен статус наличия товара для лучшего восприятия.

src/components/dashboard/sidebar.tsx

@@ -11,7 +11,8 @@ import {
   Store,
   MessageCircle,
   Wrench,
-  Warehouse
+  Warehouse,
+  Users
 } from 'lucide-react'
 
 export function Sidebar() {
@@ -71,11 +72,16 @@ export function Sidebar() {
     router.push('/warehouse')
   }
 
+  const handleEmployeesClick = () => {
+    router.push('/employees')
+  }
+
   const isSettingsActive = pathname === '/settings'
   const isMarketActive = pathname.startsWith('/market')
   const isMessengerActive = pathname.startsWith('/messenger')
   const isServicesActive = pathname.startsWith('/services')
   const isWarehouseActive = pathname.startsWith('/warehouse')
+  const isEmployeesActive = pathname.startsWith('/employees')
 
   return (
     <div className="fixed left-0 top-0 h-full w-56 bg-white/10 backdrop-blur-xl border-r border-white/20 p-3">
@@ -158,6 +164,22 @@ export function Sidebar() {
             </Button>
           )}
 
+          {/* Сотрудники - только для фулфилмент центров */}
+          {user?.organization?.type === 'FULFILLMENT' && (
+            <Button
+              variant={isEmployeesActive ? "secondary" : "ghost"}
+              className={`w-full justify-start text-left transition-all duration-200 h-8 text-xs ${
+                isEmployeesActive
+                  ? 'bg-white/20 text-white hover:bg-white/30' 
+                  : 'text-white/80 hover:bg-white/10 hover:text-white'
+              } cursor-pointer`}
+              onClick={handleEmployeesClick}
+            >
+              <Users className="h-3 w-3 mr-2" />
+              Сотрудники
+            </Button>
+          )}
+
           {/* Склад - только для оптовиков */}
           {user?.organization?.type === 'WHOLESALE' && (
             <Button

src/components/employees/employee-schedule.tsx

@@ -0,0 +1,435 @@
+"use client"
+
+import { useState } from 'react'
+import { Card } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { Badge } from '@/components/ui/badge'
+import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'
+import { 
+  Calendar,
+  ChevronLeft,
+  ChevronRight,
+  User,
+  CheckCircle,
+  XCircle,
+  Plane,
+  Activity,
+  Clock
+} from 'lucide-react'
+
+// Типы для табеля
+type WorkDayStatus = 'work' | 'weekend' | 'vacation' | 'sick' | 'absent'
+
+interface WorkDay {
+  date: Date
+  status: WorkDayStatus
+  hours?: number
+  note?: string
+}
+
+interface EmployeeSchedule {
+  employeeId: string
+  month: string
+  year: number
+  days: WorkDay[]
+}
+
+// Моковые данные сотрудников для календаря
+const scheduleEmployees = [
+  { id: '1', name: 'Александр Петров', avatar: undefined },
+  { id: '2', name: 'Мария Иванова', avatar: undefined },
+  { id: '3', name: 'Дмитрий Сидоров', avatar: undefined },
+  { id: '4', name: 'Анна Козлова', avatar: undefined }
+]
+
+export function EmployeeSchedule() {
+  const [currentDate, setCurrentDate] = useState(new Date())
+  const [selectedEmployee, setSelectedEmployee] = useState<string>('all')
+  const [schedules, setSchedules] = useState<Record<string, EmployeeSchedule>>({})
+
+  // Получаем текущий месяц и год
+  const currentMonth = currentDate.getMonth()
+  const currentYear = currentDate.getFullYear()
+  
+  // Получаем количество дней в месяце
+  const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate()
+  const firstDayOfMonth = new Date(currentYear, currentMonth, 1).getDay()
+  
+  // Массив дней недели
+  const weekDays = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс']
+  
+  // Названия месяцев
+  const monthNames = [
+    'Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь',
+    'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'
+  ]
+
+  // Функции навигации
+  const goToPrevMonth = () => {
+    setCurrentDate(new Date(currentYear, currentMonth - 1, 1))
+  }
+
+  const goToNextMonth = () => {
+    setCurrentDate(new Date(currentYear, currentMonth + 1, 1))
+  }
+
+  const goToToday = () => {
+    setCurrentDate(new Date())
+  }
+
+  // Получить статус работы для конкретного дня и сотрудника
+  const getDayStatus = (employeeId: string, day: number): WorkDayStatus => {
+    const monthKey = `${currentYear}-${currentMonth}`
+    const schedule = schedules[`${employeeId}-${monthKey}`]
+    if (!schedule) return getDefaultStatus(day)
+    
+    const dayData = schedule.days.find(d => d.date.getDate() === day)
+    return dayData?.status || getDefaultStatus(day)
+  }
+
+  // Получить количество часов для дня
+  const getDayHours = (employeeId: string, day: number): number => {
+    const monthKey = `${currentYear}-${currentMonth}`
+    const schedule = schedules[`${employeeId}-${monthKey}`]
+    if (!schedule) return getDefaultHours(day)
+    
+    const dayData = schedule.days.find(d => d.date.getDate() === day)
+    return dayData?.hours || getDefaultHours(day)
+  }
+
+  // Получить стандартный статус для дня (выходные или рабочие дни)
+  const getDefaultStatus = (day: number): WorkDayStatus => {
+    const date = new Date(currentYear, currentMonth, day)
+    const dayOfWeek = date.getDay()
+    return (dayOfWeek === 0 || dayOfWeek === 6) ? 'weekend' : 'work'
+  }
+
+  // Получить стандартное количество часов
+  const getDefaultHours = (day: number): number => {
+    const status = getDefaultStatus(day)
+    return status === 'work' ? 8 : 0
+  }
+
+  // Изменить статус дня для сотрудника
+  const changeDayStatus = (employeeId: string, day: number, status: WorkDayStatus) => {
+    const monthKey = `${currentYear}-${currentMonth}`
+    const scheduleKey = `${employeeId}-${monthKey}`
+    const date = new Date(currentYear, currentMonth, day)
+    
+    setSchedules(prev => {
+      const currentSchedule = prev[scheduleKey] || {
+        employeeId,
+        month: monthKey,
+        year: currentYear,
+        days: []
+      }
+      
+      const existingDayIndex = currentSchedule.days.findIndex(d => d.date.getDate() === day)
+      const hours = status === 'work' ? 8 : status === 'vacation' || status === 'sick' ? 8 : 0
+      
+      if (existingDayIndex >= 0) {
+        currentSchedule.days[existingDayIndex] = {
+          ...currentSchedule.days[existingDayIndex],
+          status,
+          hours
+        }
+      } else {
+        currentSchedule.days.push({
+          date,
+          status,
+          hours
+        })
+      }
+      
+      return {
+        ...prev,
+        [scheduleKey]: currentSchedule
+      }
+    })
+  }
+
+  // Получить стиль ячейки в зависимости от статуса
+  const getCellStyle = (status: WorkDayStatus) => {
+    switch (status) {
+      case 'work':
+        return 'bg-green-500/20 text-green-300 border-green-500/30'
+      case 'weekend':
+        return 'bg-gray-500/20 text-gray-300 border-gray-500/30'
+      case 'vacation':
+        return 'bg-blue-500/20 text-blue-300 border-blue-500/30'
+      case 'sick':
+        return 'bg-yellow-500/20 text-yellow-300 border-yellow-500/30'
+      case 'absent':
+        return 'bg-red-500/20 text-red-300 border-red-500/30'
+      default:
+        return 'bg-white/10 text-white/70 border-white/20'
+    }
+  }
+
+  // Получить иконку для статуса
+  const getStatusIcon = (status: WorkDayStatus) => {
+    switch (status) {
+      case 'work':
+        return <CheckCircle className="h-3 w-3" />
+      case 'weekend':
+        return <Clock className="h-3 w-3" />
+      case 'vacation':
+        return <Plane className="h-3 w-3" />
+      case 'sick':
+        return <Activity className="h-3 w-3" />
+      case 'absent':
+        return <XCircle className="h-3 w-3" />
+      default:
+        return null
+    }
+  }
+
+  // Получить название статуса
+  const getStatusName = (status: WorkDayStatus) => {
+    switch (status) {
+      case 'work': return 'Рабочий'
+      case 'weekend': return 'Выходной'
+      case 'vacation': return 'Отпуск'
+      case 'sick': return 'Больничный'
+      case 'absent': return 'Прогул'
+      default: return 'Неизвестно'
+    }
+  }
+
+  // Создаем массив дней для отображения
+  const calendarDays: (number | null)[] = []
+  
+  // Добавляем пустые ячейки для выравнивания первой недели
+  const startOffset = firstDayOfMonth === 0 ? 6 : firstDayOfMonth - 1
+  for (let i = 0; i < startOffset; i++) {
+    calendarDays.push(null)
+  }
+  
+  // Добавляем дни месяца
+  for (let day = 1; day <= daysInMonth; day++) {
+    calendarDays.push(day)
+  }
+
+  // Получить статистику для сотрудника за месяц
+  const getMonthStats = (employeeId: string) => {
+    const monthKey = `${currentYear}-${currentMonth}`
+    const schedule = schedules[`${employeeId}-${monthKey}`]
+    
+    let workDays = 0
+    let vacationDays = 0
+    let sickDays = 0
+    let absentDays = 0
+    let totalHours = 0
+    
+    for (let day = 1; day <= daysInMonth; day++) {
+      const status = getDayStatus(employeeId, day)
+      const hours = getDayHours(employeeId, day)
+      
+      switch (status) {
+        case 'work':
+          workDays++
+          break
+        case 'vacation':
+          vacationDays++
+          break
+        case 'sick':
+          sickDays++
+          break
+        case 'absent':
+          absentDays++
+          break
+      }
+      
+      totalHours += hours
+    }
+    
+    return { workDays, vacationDays, sickDays, absentDays, totalHours }
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Заголовок с навигацией */}
+      <Card className="glass-card p-4">
+        <div className="flex items-center justify-between mb-4">
+          <div className="flex items-center gap-4">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={goToPrevMonth}
+              className="glass-secondary text-white hover:text-white"
+            >
+              <ChevronLeft className="h-4 w-4" />
+            </Button>
+            
+            <h2 className="text-xl font-semibold text-white">
+              {monthNames[currentMonth]} {currentYear}
+            </h2>
+            
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={goToNextMonth}
+              className="glass-secondary text-white hover:text-white"
+            >
+              <ChevronRight className="h-4 w-4" />
+            </Button>
+          </div>
+
+          <div className="flex items-center gap-4">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={goToToday}
+              className="glass-secondary text-white hover:text-white"
+            >
+              <Calendar className="h-4 w-4 mr-2" />
+              Сегодня
+            </Button>
+            
+            <Select value={selectedEmployee} onValueChange={setSelectedEmployee}>
+              <SelectTrigger className="glass-input text-white w-48">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent className="bg-gray-900 border-white/20">
+                <SelectItem value="all" className="text-white hover:bg-white/10">
+                  Все сотрудники
+                </SelectItem>
+                {scheduleEmployees.map(emp => (
+                  <SelectItem key={emp.id} value={emp.id} className="text-white hover:bg-white/10">
+                    {emp.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+
+        {/* Легенда */}
+        <div className="flex flex-wrap gap-3">
+          {[
+            { status: 'work' as WorkDayStatus, label: 'Рабочий день' },
+            { status: 'weekend' as WorkDayStatus, label: 'Выходной' },
+            { status: 'vacation' as WorkDayStatus, label: 'Отпуск' },
+            { status: 'sick' as WorkDayStatus, label: 'Больничный' },
+            { status: 'absent' as WorkDayStatus, label: 'Прогул' }
+          ].map(({ status, label }) => (
+            <div key={status} className="flex items-center gap-2">
+              <div className={`w-4 h-4 rounded border ${getCellStyle(status)}`}>
+                {getStatusIcon(status)}
+              </div>
+              <span className="text-white/70 text-sm">{label}</span>
+            </div>
+          ))}
+        </div>
+      </Card>
+
+      {/* Календарь для каждого сотрудника */}
+      {(selectedEmployee === 'all' ? scheduleEmployees : scheduleEmployees.filter(e => e.id === selectedEmployee)).map(employee => {
+        const stats = getMonthStats(employee.id)
+        
+        return (
+          <Card key={employee.id} className="glass-card p-6">
+            {/* Информация о сотруднике */}
+            <div className="flex items-center justify-between mb-6">
+              <div className="flex items-center gap-3">
+                <Avatar className="h-12 w-12 ring-2 ring-white/20">
+                  {employee.avatar ? (
+                    <AvatarImage src={employee.avatar} alt={employee.name} />
+                  ) : null}
+                  <AvatarFallback className="bg-gradient-to-br from-purple-500 to-purple-600 text-white font-semibold">
+                    {employee.name.split(' ').map(n => n.charAt(0)).join('')}
+                  </AvatarFallback>
+                </Avatar>
+                <div>
+                  <h3 className="text-white font-semibold text-lg">{employee.name}</h3>
+                  <p className="text-white/70 text-sm">Табель работы за {monthNames[currentMonth].toLowerCase()}</p>
+                </div>
+              </div>
+              
+              {/* Статистика */}
+              <div className="grid grid-cols-2 md:grid-cols-5 gap-4 text-center">
+                <div>
+                  <p className="text-green-400 font-semibold text-lg">{stats.workDays}</p>
+                  <p className="text-white/60 text-xs">Рабочих</p>
+                </div>
+                <div>
+                  <p className="text-blue-400 font-semibold text-lg">{stats.vacationDays}</p>
+                  <p className="text-white/60 text-xs">Отпуск</p>
+                </div>
+                <div>
+                  <p className="text-yellow-400 font-semibold text-lg">{stats.sickDays}</p>
+                  <p className="text-white/60 text-xs">Больничный</p>
+                </div>
+                <div>
+                  <p className="text-red-400 font-semibold text-lg">{stats.absentDays}</p>
+                  <p className="text-white/60 text-xs">Прогулы</p>
+                </div>
+                <div>
+                  <p className="text-white font-semibold text-lg">{stats.totalHours}ч</p>
+                  <p className="text-white/60 text-xs">Всего часов</p>
+                </div>
+              </div>
+            </div>
+
+            {/* Сетка календаря */}
+            <div className="grid grid-cols-7 gap-2">
+              {/* Заголовки дней недели */}
+              {weekDays.map(day => (
+                <div key={day} className="p-2 text-center text-white/70 font-medium text-sm">
+                  {day}
+                </div>
+              ))}
+              
+              {/* Дни месяца */}
+              {calendarDays.map((day, index) => {
+                if (day === null) {
+                  return <div key={`empty-${index}`} className="p-2"></div>
+                }
+                
+                const status = getDayStatus(employee.id, day)
+                const hours = getDayHours(employee.id, day)
+                const isToday = new Date().getDate() === day && 
+                               new Date().getMonth() === currentMonth && 
+                               new Date().getFullYear() === currentYear
+                
+                return (
+                  <div
+                    key={`${employee.id}-${day}`}
+                    className={`
+                      relative p-2 min-h-[60px] border rounded-lg cursor-pointer
+                      transition-all duration-200 hover:scale-105
+                      ${getCellStyle(status)}
+                      ${isToday ? 'ring-2 ring-white/50' : ''}
+                    `}
+                    onClick={() => {
+                      // Циклично переключаем статусы
+                      const statuses: WorkDayStatus[] = ['work', 'weekend', 'vacation', 'sick', 'absent']
+                      const currentIndex = statuses.indexOf(status)
+                      const nextStatus = statuses[(currentIndex + 1) % statuses.length]
+                      changeDayStatus(employee.id, day, nextStatus)
+                    }}
+                  >
+                    <div className="flex flex-col items-center justify-center h-full">
+                      <div className="flex items-center gap-1 mb-1">
+                        {getStatusIcon(status)}
+                        <span className="font-semibold text-sm">{day}</span>
+                      </div>
+                      {hours > 0 && (
+                        <span className="text-xs opacity-80">{hours}ч</span>
+                      )}
+                    </div>
+                    
+                    {isToday && (
+                      <div className="absolute -top-1 -right-1 w-3 h-3 bg-white rounded-full"></div>
+                    )}
+                  </div>
+                )
+              })}
+            </div>
+          </Card>
+        )
+      })}
+    </div>
+  )
+} 

src/components/employees/employees-dashboard.tsx

@@ -0,0 +1,106 @@
+"use client"
+
+import { useState } from 'react'
+import { Sidebar } from '@/components/dashboard/sidebar'
+import { Card } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { Input } from '@/components/ui/input'
+import { EmployeesList } from './employees-list'
+import { EmployeeSchedule } from './employee-schedule'
+import { 
+  Users, 
+  Calendar,
+  Search,
+  Plus,
+  FileText
+} from 'lucide-react'
+
+export function EmployeesDashboard() {
+  const [searchQuery, setSearchQuery] = useState('')
+
+  return (
+    <div className="min-h-screen bg-gradient-smooth flex">
+      <Sidebar />
+      <main className="flex-1 ml-56 p-6">
+        <div className="max-w-7xl mx-auto">
+          {/* Заголовок страницы */}
+          <div className="flex items-center justify-between mb-6">
+            <div className="flex items-center gap-3">
+              <Users className="h-8 w-8 text-purple-400" />
+              <div>
+                <h1 className="text-2xl font-bold text-white">Управление сотрудниками</h1>
+                <p className="text-white/70">Личные данные, табель работы и учет</p>
+              </div>
+            </div>
+            <Button className="glass-button">
+              <Plus className="h-4 w-4 mr-2" />
+              Добавить сотрудника
+            </Button>
+          </div>
+
+          {/* Поиск */}
+          <Card className="glass-card p-4 mb-6">
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white/60 h-4 w-4" />
+              <Input
+                placeholder="Поиск сотрудников..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="glass-input pl-10"
+              />
+            </div>
+          </Card>
+
+          {/* Основной контент с вкладками */}
+          <Tabs defaultValue="list" className="w-full">
+            <TabsList className="glass-card mb-6 grid w-full grid-cols-3">
+              <TabsTrigger 
+                value="list" 
+                className="text-white data-[state=active]:bg-white/20 cursor-pointer"
+              >
+                <Users className="h-4 w-4 mr-2" />
+                Список сотрудников
+              </TabsTrigger>
+              <TabsTrigger 
+                value="schedule" 
+                className="text-white data-[state=active]:bg-white/20 cursor-pointer"
+              >
+                <Calendar className="h-4 w-4 mr-2" />
+                Табель работы
+              </TabsTrigger>
+              <TabsTrigger 
+                value="reports" 
+                className="text-white data-[state=active]:bg-white/20 cursor-pointer"
+              >
+                <FileText className="h-4 w-4 mr-2" />
+                Отчеты
+              </TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="list">
+              <EmployeesList searchQuery={searchQuery} />
+            </TabsContent>
+
+            <TabsContent value="schedule">
+              <EmployeeSchedule />
+            </TabsContent>
+
+            <TabsContent value="reports">
+              <Card className="glass-card p-8">
+                <div className="text-center">
+                  <FileText className="h-16 w-16 text-white/40 mx-auto mb-4" />
+                  <h3 className="text-xl font-semibold text-white mb-2">Отчеты</h3>
+                  <p className="text-white/70 mb-4">
+                    Генерация отчетов по работе сотрудников
+                  </p>
+                  <p className="text-white/50 text-sm">Функция в разработке</p>
+                </div>
+              </Card>
+            </TabsContent>
+          </Tabs>
+        </div>
+      </main>
+    </div>
+  )
+} 

src/components/employees/employees-list.tsx

@@ -0,0 +1,413 @@
+"use client"
+
+import { useState } from 'react'
+import { Card } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'
+import { Badge } from '@/components/ui/badge'
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { 
+  Edit, 
+  Phone, 
+  Mail, 
+  Calendar,
+  MapPin,
+  User,
+  Briefcase,
+  Save,
+  X
+} from 'lucide-react'
+
+// Интерфейс сотрудника
+interface Employee {
+  id: string
+  firstName: string
+  lastName: string
+  position: string
+  department: string
+  phone: string
+  email: string
+  avatar?: string
+  hireDate: string
+  status: 'active' | 'vacation' | 'sick' | 'inactive'
+  salary: number
+  address: string
+}
+
+// Моковые данные сотрудников
+const mockEmployees: Employee[] = [
+  {
+    id: '1',
+    firstName: 'Александр',
+    lastName: 'Петров',
+    position: 'Менеджер склада',
+    department: 'Логистика',
+    phone: '+7 (999) 123-45-67',
+    email: 'a.petrov@company.com',
+    hireDate: '2023-01-15',
+    status: 'active',
+    salary: 80000,
+    address: 'Москва, ул. Ленина, 10'
+  },
+  {
+    id: '2',
+    firstName: 'Мария',
+    lastName: 'Иванова',
+    position: 'Кладовщик',
+    department: 'Логистика',
+    phone: '+7 (999) 234-56-78',
+    email: 'm.ivanova@company.com',
+    hireDate: '2023-03-20',
+    status: 'active',
+    salary: 60000,
+    address: 'Москва, ул. Советская, 25'
+  },
+  {
+    id: '3',
+    firstName: 'Дмитрий',
+    lastName: 'Сидоров',
+    position: 'Водитель',
+    department: 'Доставка',
+    phone: '+7 (999) 345-67-89',
+    email: 'd.sidorov@company.com',
+    hireDate: '2022-11-10',
+    status: 'vacation',
+    salary: 70000,
+    address: 'Москва, ул. Мира, 15'
+  },
+  {
+    id: '4',
+    firstName: 'Анна',
+    lastName: 'Козлова',
+    position: 'HR-специалист',
+    department: 'Кадры',
+    phone: '+7 (999) 456-78-90',
+    email: 'a.kozlova@company.com',
+    hireDate: '2023-02-05',
+    status: 'active',
+    salary: 75000,
+    address: 'Москва, пр. Победы, 8'
+  }
+]
+
+interface EmployeesListProps {
+  searchQuery: string
+}
+
+export function EmployeesList({ searchQuery }: EmployeesListProps) {
+  const [employees, setEmployees] = useState<Employee[]>(mockEmployees)
+  const [selectedEmployee, setSelectedEmployee] = useState<Employee | null>(null)
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false)
+
+  // Фильтрация сотрудников по поисковому запросу
+  const filteredEmployees = employees.filter(employee =>
+    `${employee.firstName} ${employee.lastName}`.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    employee.position.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    employee.department.toLowerCase().includes(searchQuery.toLowerCase())
+  )
+
+  const getStatusBadge = (status: Employee['status']) => {
+    switch (status) {
+      case 'active':
+        return <Badge className="bg-green-500/20 text-green-300 border-green-500/30">Активен</Badge>
+      case 'vacation':
+        return <Badge className="bg-blue-500/20 text-blue-300 border-blue-500/30">В отпуске</Badge>
+      case 'sick':
+        return <Badge className="bg-yellow-500/20 text-yellow-300 border-yellow-500/30">На больничном</Badge>
+      case 'inactive':
+        return <Badge className="bg-red-500/20 text-red-300 border-red-500/30">Неактивен</Badge>
+      default:
+        return <Badge>Неизвестно</Badge>
+    }
+  }
+
+  const getInitials = (firstName: string, lastName: string) => {
+    return `${firstName.charAt(0)}${lastName.charAt(0)}`
+  }
+
+  const formatSalary = (salary: number) => {
+    return new Intl.NumberFormat('ru-RU').format(salary) + ' ₽'
+  }
+
+  const handleEditEmployee = (employee: Employee) => {
+    setSelectedEmployee(employee)
+    setIsEditModalOpen(true)
+  }
+
+  const handleSaveEmployee = () => {
+    if (selectedEmployee) {
+      setEmployees(prev => 
+        prev.map(emp => emp.id === selectedEmployee.id ? selectedEmployee : emp)
+      )
+      setIsEditModalOpen(false)
+      setSelectedEmployee(null)
+    }
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* Статистика */}
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
+        <Card className="glass-card p-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-white/70 text-sm">Всего сотрудников</p>
+              <p className="text-2xl font-bold text-white">{employees.length}</p>
+            </div>
+            <User className="h-8 w-8 text-purple-400" />
+          </div>
+        </Card>
+        <Card className="glass-card p-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-white/70 text-sm">Активных</p>
+              <p className="text-2xl font-bold text-green-400">
+                {employees.filter(e => e.status === 'active').length}
+              </p>
+            </div>
+            <Briefcase className="h-8 w-8 text-green-400" />
+          </div>
+        </Card>
+        <Card className="glass-card p-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-white/70 text-sm">В отпуске</p>
+              <p className="text-2xl font-bold text-blue-400">
+                {employees.filter(e => e.status === 'vacation').length}
+              </p>
+            </div>
+            <Calendar className="h-8 w-8 text-blue-400" />
+          </div>
+        </Card>
+        <Card className="glass-card p-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-white/70 text-sm">Отделов</p>
+              <p className="text-2xl font-bold text-white">
+                {new Set(employees.map(e => e.department)).size}
+              </p>
+            </div>
+            <MapPin className="h-8 w-8 text-orange-400" />
+          </div>
+        </Card>
+      </div>
+
+      {/* Список сотрудников */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {filteredEmployees.map((employee) => (
+          <Card key={employee.id} className="glass-card p-6">
+            <div className="flex items-start space-x-4">
+              <Avatar className="h-16 w-16 ring-2 ring-white/20">
+                {employee.avatar ? (
+                  <AvatarImage src={employee.avatar} alt={`${employee.firstName} ${employee.lastName}`} />
+                ) : null}
+                <AvatarFallback className="bg-gradient-to-br from-purple-500 to-purple-600 text-white font-semibold">
+                  {getInitials(employee.firstName, employee.lastName)}
+                </AvatarFallback>
+              </Avatar>
+              
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center justify-between mb-2">
+                  <h3 className="text-white font-semibold text-lg truncate">
+                    {employee.firstName} {employee.lastName}
+                  </h3>
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    className="text-white/60 hover:text-white hover:bg-white/10 h-8 w-8 p-0"
+                    onClick={() => handleEditEmployee(employee)}
+                  >
+                    <Edit className="h-4 w-4" />
+                  </Button>
+                </div>
+                
+                <p className="text-purple-300 font-medium mb-1">{employee.position}</p>
+                <p className="text-white/60 text-sm mb-3">{employee.department}</p>
+                
+                <div className="flex items-center justify-between mb-3">
+                  {getStatusBadge(employee.status)}
+                  <span className="text-white font-semibold">
+                    {formatSalary(employee.salary)}
+                  </span>
+                </div>
+                
+                <div className="space-y-2">
+                  <div className="flex items-center text-white/70 text-sm">
+                    <Phone className="h-3 w-3 mr-2 flex-shrink-0" />
+                    <span className="truncate">{employee.phone}</span>
+                  </div>
+                  <div className="flex items-center text-white/70 text-sm">
+                    <Mail className="h-3 w-3 mr-2 flex-shrink-0" />
+                    <span className="truncate">{employee.email}</span>
+                  </div>
+                  <div className="flex items-center text-white/70 text-sm">
+                    <Calendar className="h-3 w-3 mr-2 flex-shrink-0" />
+                    <span>С {new Date(employee.hireDate).toLocaleDateString('ru-RU')}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </Card>
+        ))}
+      </div>
+
+      {/* Модальное окно редактирования */}
+      <Dialog open={isEditModalOpen} onOpenChange={setIsEditModalOpen}>
+        <DialogContent className="glass-card max-w-md">
+          <DialogHeader>
+            <DialogTitle className="text-white flex items-center gap-2">
+              <Edit className="h-5 w-5" />
+              Редактировать сотрудника
+            </DialogTitle>
+          </DialogHeader>
+          
+          {selectedEmployee && (
+            <div className="space-y-4 mt-4">
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <Label className="text-white/80">Имя</Label>
+                  <Input
+                    value={selectedEmployee.firstName}
+                    onChange={(e) => setSelectedEmployee({
+                      ...selectedEmployee,
+                      firstName: e.target.value
+                    })}
+                    className="glass-input text-white"
+                  />
+                </div>
+                <div>
+                  <Label className="text-white/80">Фамилия</Label>
+                  <Input
+                    value={selectedEmployee.lastName}
+                    onChange={(e) => setSelectedEmployee({
+                      ...selectedEmployee,
+                      lastName: e.target.value
+                    })}
+                    className="glass-input text-white"
+                  />
+                </div>
+              </div>
+              
+              <div>
+                <Label className="text-white/80">Должность</Label>
+                <Input
+                  value={selectedEmployee.position}
+                  onChange={(e) => setSelectedEmployee({
+                    ...selectedEmployee,
+                    position: e.target.value
+                  })}
+                  className="glass-input text-white"
+                />
+              </div>
+              
+              <div>
+                <Label className="text-white/80">Отдел</Label>
+                <Input
+                  value={selectedEmployee.department}
+                  onChange={(e) => setSelectedEmployee({
+                    ...selectedEmployee,
+                    department: e.target.value
+                  })}
+                  className="glass-input text-white"
+                />
+              </div>
+              
+              <div>
+                <Label className="text-white/80">Статус</Label>
+                <Select
+                  value={selectedEmployee.status}
+                  onValueChange={(value: Employee['status']) => setSelectedEmployee({
+                    ...selectedEmployee,
+                    status: value
+                  })}
+                >
+                  <SelectTrigger className="glass-input text-white">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent className="bg-gray-900 border-white/20">
+                    <SelectItem value="active" className="text-white hover:bg-white/10">Активен</SelectItem>
+                    <SelectItem value="vacation" className="text-white hover:bg-white/10">В отпуске</SelectItem>
+                    <SelectItem value="sick" className="text-white hover:bg-white/10">На больничном</SelectItem>
+                    <SelectItem value="inactive" className="text-white hover:bg-white/10">Неактивен</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <Label className="text-white/80">Телефон</Label>
+                  <Input
+                    value={selectedEmployee.phone}
+                    onChange={(e) => setSelectedEmployee({
+                      ...selectedEmployee,
+                      phone: e.target.value
+                    })}
+                    className="glass-input text-white"
+                  />
+                </div>
+                <div>
+                  <Label className="text-white/80">Зарплата</Label>
+                  <Input
+                    type="number"
+                    value={selectedEmployee.salary}
+                    onChange={(e) => setSelectedEmployee({
+                      ...selectedEmployee,
+                      salary: Number(e.target.value)
+                    })}
+                    className="glass-input text-white"
+                  />
+                </div>
+              </div>
+              
+              <div>
+                <Label className="text-white/80">Email</Label>
+                <Input
+                  type="email"
+                  value={selectedEmployee.email}
+                  onChange={(e) => setSelectedEmployee({
+                    ...selectedEmployee,
+                    email: e.target.value
+                  })}
+                  className="glass-input text-white"
+                />
+              </div>
+              
+              <div>
+                <Label className="text-white/80">Адрес</Label>
+                <Input
+                  value={selectedEmployee.address}
+                  onChange={(e) => setSelectedEmployee({
+                    ...selectedEmployee,
+                    address: e.target.value
+                  })}
+                  className="glass-input text-white"
+                />
+              </div>
+              
+              <div className="flex gap-2 pt-4">
+                <Button 
+                  onClick={handleSaveEmployee}
+                  className="glass-button flex-1"
+                >
+                  <Save className="h-4 w-4 mr-2" />
+                  Сохранить
+                </Button>
+                <Button 
+                  variant="outline"
+                  onClick={() => setIsEditModalOpen(false)}
+                  className="glass-secondary flex-1"
+                >
+                  <X className="h-4 w-4 mr-2" />
+                  Отмена
+                </Button>
+              </div>
+            </div>
+          )}
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+} 

src/components/favorites/favorites-items.tsx

@@ -217,7 +217,7 @@ export function FavoritesItems({ favorites, onBackToCategories }: FavoritesItems
                 </div>
 
                 {/* Товары этого поставщика */}
-                <div className="space-y-3">
+                <div className="grid grid-cols-3 gap-4">
                   {group.products.map((product) => {
                     const isLoading = loadingItems.has(product.id)
                     const mainImage = product.images?.[0] || product.mainImage
@@ -280,9 +280,6 @@ export function FavoritesItems({ favorites, onBackToCategories }: FavoritesItems
                               
                               {/* Статус наличия */}
                               <div className="flex items-center space-x-2">
-                                <span className="text-xs text-white/60">
-                                  {product.quantity} шт.
-                                </span>
                                 {product.quantity > 0 ? (
                                   <Badge className="bg-green-500/20 text-green-300 text-xs border border-green-500/30 px-1 py-0">
                                     В наличии
@@ -292,6 +289,9 @@ export function FavoritesItems({ favorites, onBackToCategories }: FavoritesItems
                                     Нет в наличии
                                   </Badge>
                                 )}
+                                <span className="text-xs text-white/60">
+                                  {product.quantity} шт.
+                                </span>
                               </div>
                             </div>