Добавлена кнопка "Сотрудники" в боковую панель для фулфилмент центров, улучшен интерфейс отображения товаров в избранном с изменением стилей на сетку. Перемещен статус наличия товара для лучшего восприятия.
This commit is contained in:
Bivekich
10
src/app/employees/page.tsx
Normal file
10
src/app/employees/page.tsx
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
import { AuthGuard } from "@/components/auth-guard"
|
||||||
|
import { EmployeesDashboard } from "@/components/employees/employees-dashboard"
|
||||||
|
|
||||||
|
export default function EmployeesPage() {
|
||||||
|
return (
|
||||||
|
<AuthGuard>
|
||||||
|
<EmployeesDashboard />
|
||||||
|
</AuthGuard>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -11,7 +11,8 @@ import {
|
|||||||
Store,
|
Store,
|
||||||
MessageCircle,
|
MessageCircle,
|
||||||
Wrench,
|
Wrench,
|
||||||
Warehouse
|
Warehouse,
|
||||||
|
Users
|
||||||
} from 'lucide-react'
|
} from 'lucide-react'
|
||||||
|
|
||||||
export function Sidebar() {
|
export function Sidebar() {
|
||||||
@ -71,11 +72,16 @@ export function Sidebar() {
|
|||||||
router.push('/warehouse')
|
router.push('/warehouse')
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const handleEmployeesClick = () => {
|
||||||
|
router.push('/employees')
|
||||||
|
}
|
||||||
|
|
||||||
const isSettingsActive = pathname === '/settings'
|
const isSettingsActive = pathname === '/settings'
|
||||||
const isMarketActive = pathname.startsWith('/market')
|
const isMarketActive = pathname.startsWith('/market')
|
||||||
const isMessengerActive = pathname.startsWith('/messenger')
|
const isMessengerActive = pathname.startsWith('/messenger')
|
||||||
const isServicesActive = pathname.startsWith('/services')
|
const isServicesActive = pathname.startsWith('/services')
|
||||||
const isWarehouseActive = pathname.startsWith('/warehouse')
|
const isWarehouseActive = pathname.startsWith('/warehouse')
|
||||||
|
const isEmployeesActive = pathname.startsWith('/employees')
|
||||||
|
|
||||||
return (
|
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">
|
<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>
|
</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' && (
|
{user?.organization?.type === 'WHOLESALE' && (
|
||||||
<Button
|
<Button
|
||||||
|
|||||||
435
src/components/employees/employee-schedule.tsx
Normal file
435
src/components/employees/employee-schedule.tsx
Normal file
@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
106
src/components/employees/employees-dashboard.tsx
Normal file
106
src/components/employees/employees-dashboard.tsx
Normal file
@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
413
src/components/employees/employees-list.tsx
Normal file
413
src/components/employees/employees-list.tsx
Normal file
@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -217,7 +217,7 @@ export function FavoritesItems({ favorites, onBackToCategories }: FavoritesItems
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Товары этого поставщика */}
|
{/* Товары этого поставщика */}
|
||||||
<div className="space-y-3">
|
<div className="grid grid-cols-3 gap-4">
|
||||||
{group.products.map((product) => {
|
{group.products.map((product) => {
|
||||||
const isLoading = loadingItems.has(product.id)
|
const isLoading = loadingItems.has(product.id)
|
||||||
const mainImage = product.images?.[0] || product.mainImage
|
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">
|
<div className="flex items-center space-x-2">
|
||||||
<span className="text-xs text-white/60">
|
|
||||||
{product.quantity} шт.
|
|
||||||
</span>
|
|
||||||
{product.quantity > 0 ? (
|
{product.quantity > 0 ? (
|
||||||
<Badge className="bg-green-500/20 text-green-300 text-xs border border-green-500/30 px-1 py-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>
|
</Badge>
|
||||||
)}
|
)}
|
||||||
|
<span className="text-xs text-white/60">
|
||||||
|
{product.quantity} шт.
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user