'use client'

import { useQuery, useMutation } from '@apollo/client'
import { Users, FileText, Plus, Layout, LayoutGrid } from 'lucide-react'
import React, { useState, useEffect, useMemo, useCallback } from 'react'
import { toast } from 'sonner'

import { Sidebar } from '@/components/dashboard/sidebar'
import { Button } from '@/components/ui/button'
import { Card } from '@/components/ui/card'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { UPDATE_EMPLOYEE_SCHEDULE } from '@/graphql/mutations'
import { GET_EMPLOYEE_SCHEDULE } from '@/graphql/queries'
import { GET_MY_EMPLOYEES_V2, CREATE_EMPLOYEE_V2, UPDATE_EMPLOYEE_V2, DELETE_EMPLOYEE_V2 } from '@/graphql/queries/employees-v2'
import { apolloClient } from '@/lib/apollo-client'

import { EmployeeCompactForm } from './employee-compact-form'
import { EmployeeEditInlineForm } from './employee-edit-inline-form'
import { EmployeeEmptyState } from './employee-empty-state'
import { EmployeeInlineForm } from './employee-inline-form'
import { EmployeeLegend } from './employee-legend'
import { EmployeeReports } from './employee-reports'
import { EmployeeRow } from './employee-row'
import { EmployeeSearch } from './employee-search'

// Интерфейс сотрудника
interface Employee {
  id: string
  firstName: string
  lastName: string
  middleName?: string
  position: string
  phone: string
  email?: string
  avatar?: string
  hireDate: string
  status: 'ACTIVE' | 'VACATION' | 'SICK' | 'FIRED'
  salary?: number
  address?: string
  birthDate?: string
  passportSeries?: string
  passportNumber?: string
  passportIssued?: string
  passportDate?: string
  emergencyContact?: string
  emergencyPhone?: string
  telegram?: string
  whatsapp?: string
  passportPhoto?: string
  createdAt: string
  updatedAt: string
}

const EmployeesDashboard = React.memo(() => {
  const [searchQuery, setSearchQuery] = useState('')
  const [showAddForm, setShowAddForm] = useState(false)
  const [showCompactForm, setShowCompactForm] = useState(true) // По умолчанию компактная форма
  const [showEditForm, setShowEditForm] = useState(false)
  const [createLoading, setCreateLoading] = useState(false)
  const [editingEmployee, setEditingEmployee] = useState<Employee | null>(null)
  const [deletingEmployeeId, setDeletingEmployeeId] = useState<string | null>(null)
  const [employeeSchedules, setEmployeeSchedules] = useState<{
    [key: string]: ScheduleRecord[]
  }>({})
  const [currentYear, setCurrentYear] = useState(new Date().getFullYear())
  const [currentMonth, setCurrentMonth] = useState(new Date().getMonth())
  const [activeTab, setActiveTab] = useState('combined')

  interface ScheduleRecord {
    id: string
    date: string
    status: string
    hoursWorked?: number
    overtimeHours?: number
    notes?: string
    employee: {
      id: string
      firstName: string
      lastName: string
    }
  }

  // GraphQL запросы и мутации V2
  const { data, loading, refetch } = useQuery(GET_MY_EMPLOYEES_V2)
  const [createEmployee] = useMutation(CREATE_EMPLOYEE_V2, {
    refetchQueries: [{ query: GET_MY_EMPLOYEES_V2 }],
    onCompleted: () => {
      refetch() // Принудительно обновляем список
    },
  })
  const [updateEmployee] = useMutation(UPDATE_EMPLOYEE_V2, {
    refetchQueries: [{ query: GET_MY_EMPLOYEES_V2 }],
  })
  const [deleteEmployee] = useMutation(DELETE_EMPLOYEE_V2, {
    refetchQueries: [{ query: GET_MY_EMPLOYEES_V2 }],
  })
  const [updateEmployeeSchedule] = useMutation(UPDATE_EMPLOYEE_SCHEDULE)

  const employees = useMemo(() => {
    // Адаптация V2 данных к оригинальному интерфейсу с защитными проверками
    return (data?.employeesV2?.items || []).map((emp: any) => ({
      id: emp?.id || '',
      firstName: emp?.personalInfo?.firstName || '',
      lastName: emp?.personalInfo?.lastName || '',
      middleName: emp?.personalInfo?.middleName || '',
      fullName: emp?.personalInfo?.fullName || '',
      birthDate: emp?.personalInfo?.birthDate || '',
      avatar: emp?.personalInfo?.avatar || '',
      phone: emp?.contactInfo?.phone || '',
      email: emp?.contactInfo?.email || '',
      telegram: emp?.contactInfo?.telegram || '',
      whatsapp: emp?.contactInfo?.whatsapp || '',
      address: emp?.contactInfo?.address || '',
      emergencyContact: emp?.contactInfo?.emergencyContact || '',
      emergencyPhone: emp?.contactInfo?.emergencyPhone || '',
      position: emp?.workInfo?.position || '',
      department: emp?.workInfo?.department || '',
      hireDate: emp?.workInfo?.hireDate || '',
      salary: emp?.workInfo?.salary || 0,
      status: emp?.workInfo?.status || 'ACTIVE',
      organizationId: emp?.organizationId || '',
      createdAt: emp?.metadata?.createdAt || new Date().toISOString(),
      updatedAt: emp?.metadata?.updatedAt || new Date().toISOString(),
    }))
  }, [data?.employeesV2?.items])

  // Фильтрация сотрудников на верхнем уровне компонента (исправление Rules of Hooks)
  const filteredEmployees = useMemo(
    () =>
      employees.filter(
        (employee: Employee) =>
          `${employee.firstName} ${employee.lastName}`.toLowerCase().includes(searchQuery.toLowerCase()) ||
          employee.position.toLowerCase().includes(searchQuery.toLowerCase()),
      ),
    [employees, searchQuery],
  )

  // Загружаем данные табеля для всех сотрудников
  useEffect(() => {
    const loadScheduleData = async () => {
      if (employees.length > 0) {
        const schedulePromises = employees.map(async (employee: Employee) => {
          try {
            const { data } = await apolloClient.query({
              query: GET_EMPLOYEE_SCHEDULE,
              variables: {
                employeeId: employee.id,
                year: currentYear,
                month: currentMonth,
              },
            })
            return {
              employeeId: employee.id,
              scheduleData: data?.employeeSchedule || [],
            }
          } catch (error) {
            console.error(`Error loading schedule for ${employee.id}:`, error)
            return { employeeId: employee.id, scheduleData: [] }
          }
        })

        const results = await Promise.all(schedulePromises)
        const scheduleMap: { [key: string]: ScheduleRecord[] } = {}
        results.forEach((result: { employeeId: string; scheduleData: ScheduleRecord[] }) => {
          if (result && result.scheduleData) {
            scheduleMap[result.employeeId] = result.scheduleData
          }
        })
        setEmployeeSchedules(scheduleMap)
      }
    }

    loadScheduleData()
  }, [employees, currentYear, currentMonth])

  const handleEditEmployee = useCallback((employee: Employee) => {
    setEditingEmployee(employee)
    setShowEditForm(true)
    setShowAddForm(false) // Закрываем форму добавления если открыта
  }, [])

  const handleEmployeeSaved = useCallback(
    async (employeeData: Partial<Employee>) => {
      try {
        if (editingEmployee) {
          // Обновление существующего сотрудника - адаптация для V2
          const v2Input = {
            personalInfo: {
              firstName: employeeData.firstName,
              lastName: employeeData.lastName,
              middleName: employeeData.middleName,
              birthDate: employeeData.birthDate,
              avatar: employeeData.avatar,
            },
            contactInfo: {
              phone: employeeData.phone,
              email: employeeData.email,
              telegram: employeeData.telegram,
              whatsapp: employeeData.whatsapp,
              address: employeeData.address,
              emergencyContact: employeeData.emergencyContact,
              emergencyPhone: employeeData.emergencyPhone,
            },
            workInfo: {
              position: employeeData.position,
              department: employeeData.department,
              salary: employeeData.salary,
              status: employeeData.status,
            },
          }
          
          const { data } = await updateEmployee({
            variables: {
              id: editingEmployee.id,
              input: v2Input,
            },
          })
          if (data?.updateEmployeeV2?.success) {
            toast.success('Сотрудник успешно обновлен')
            refetch()
          }
        } else {
          // Добавление нового сотрудника - адаптация для V2
          const v2CreateInput = {
            personalInfo: {
              firstName: employeeData.firstName,
              lastName: employeeData.lastName,
              middleName: employeeData.middleName,
              birthDate: employeeData.birthDate,
              avatar: employeeData.avatar,
            },
            contactInfo: {
              phone: employeeData.phone,
              email: employeeData.email,
              telegram: employeeData.telegram,
              whatsapp: employeeData.whatsapp,
              address: employeeData.address,
              emergencyContact: employeeData.emergencyContact,
              emergencyPhone: employeeData.emergencyPhone,
            },
            workInfo: {
              position: employeeData.position,
              department: employeeData.department,
              hireDate: employeeData.hireDate,
              salary: employeeData.salary,
              status: employeeData.status || 'ACTIVE',
            },
          }
          
          const { data } = await createEmployee({
            variables: { input: v2CreateInput },
          })
          if (data?.createEmployeeV2?.success) {
            toast.success('Сотрудник успешно добавлен')
            refetch()
          }
        }
        setShowEditForm(false)
        setEditingEmployee(null)
      } catch (error) {
        console.error('Error saving employee:', error)
        toast.error('Ошибка при сохранении сотрудника')
      }
    },
    [editingEmployee, updateEmployee, createEmployee, refetch],
  )

  const handleCreateEmployee = useCallback(
    async (employeeData: Partial<Employee>) => {
      setCreateLoading(true)
      try {
        const v2CreateInputDuplicate = {
          personalInfo: {
            firstName: employeeData.firstName,
            lastName: employeeData.lastName,
            middleName: employeeData.middleName,
            birthDate: employeeData.birthDate,
            avatar: employeeData.avatar,
          },
          contactInfo: {
            phone: employeeData.phone,
            email: employeeData.email,
            telegram: employeeData.telegram,
            whatsapp: employeeData.whatsapp,
            address: employeeData.address,
            emergencyContact: employeeData.emergencyContact,
            emergencyPhone: employeeData.emergencyPhone,
          },
          workInfo: {
            position: employeeData.position,
            department: employeeData.department,
            hireDate: employeeData.hireDate,
            salary: employeeData.salary,
            status: employeeData.status || 'ACTIVE',
          },
        }
        
        const { data } = await createEmployee({
          variables: { input: v2CreateInputDuplicate },
        })
        if (data?.createEmployeeV2?.success) {
          toast.success('Сотрудник успешно добавлен!')
          setShowAddForm(false)
          refetch()
        }
      } catch (error) {
        console.error('Error creating employee:', error)
        toast.error('Ошибка при создании сотрудника')
      } finally {
        setCreateLoading(false)
      }
    },
    [createEmployee, refetch],
  )

  const handleEmployeeDeleted = useCallback(
    async (employeeId: string) => {
      try {
        setDeletingEmployeeId(employeeId)
        const { data } = await deleteEmployee({
          variables: { id: employeeId },
        })
        if (data?.deleteEmployeeV2) {
          toast.success('Сотрудник успешно уволен')
          refetch()
        }
      } catch (error) {
        console.error('Error deleting employee:', error)
        toast.error('Ошибка при увольнении сотрудника')
      } finally {
        setDeletingEmployeeId(null)
      }
    },
    [deleteEmployee, refetch],
  )

  // Функция для изменения статуса дня в табеле
  const changeDayStatus = useCallback(
    async (employeeId: string, day: number, currentStatus: string) => {
      try {
        // Циклично переключаем статусы
        const statuses = ['WORK', 'WEEKEND', 'VACATION', 'SICK', 'ABSENT']
        const currentIndex = statuses.indexOf(currentStatus.toUpperCase())
        const nextStatus = statuses[(currentIndex + 1) % statuses.length]

        // Формируем дату
        const date = new Date(currentYear, currentMonth, day)
        const hours = nextStatus === 'WORK' ? 8 : 0

        // Отправляем мутацию
        await updateEmployeeSchedule({
          variables: {
            input: {
              employeeId: employeeId,
              date: date.toISOString().split('T')[0], // YYYY-MM-DD формат
              status: nextStatus,
              hoursWorked: hours,
            },
          },
        })

        // Обновляем локальное состояние
        const updatedDate = new Date(currentYear, currentMonth, day)
        const dateStr = updatedDate.toISOString().split('T')[0]

        setEmployeeSchedules((prev) => {
          const currentSchedule = prev[employeeId] || []
          const existingRecordIndex = currentSchedule.findIndex((record) => record.date.split('T')[0] === dateStr)

          const newRecord: ScheduleRecord = {
            id: Date.now().toString(), // временный ID
            date: updatedDate.toISOString(),
            status: nextStatus,
            hoursWorked: hours,
            employee: {
              id: employeeId,
              firstName: '',
              lastName: '',
            },
          }

          let updatedSchedule
          if (existingRecordIndex >= 0) {
            // Обновляем существующую запись
            updatedSchedule = [...currentSchedule]
            updatedSchedule[existingRecordIndex] = {
              ...updatedSchedule[existingRecordIndex],
              ...newRecord,
            }
          } else {
            // Добавляем новую запись
            updatedSchedule = [...currentSchedule, newRecord]
          }

          return {
            ...prev,
            [employeeId]: updatedSchedule,
          }
        })

        toast.success('Статус дня обновлен')
      } catch (error) {
        console.error('Error updating day status:', error)
        toast.error('Ошибка при обновлении статуса дня')
      }
    },
    [updateEmployeeSchedule, currentYear, currentMonth, setEmployeeSchedules],
  )

  // Функция для обновления данных дня из модалки
  const updateDayData = async (
    employeeId: string,
    date: Date,
    data: {
      status: string
      hoursWorked?: number
      overtimeHours?: number
      notes?: string
    },
  ) => {
    try {
      // Отправляем мутацию
      await updateEmployeeSchedule({
        variables: {
          input: {
            employeeId: employeeId,
            date: date.toISOString().split('T')[0], // YYYY-MM-DD формат
            status: data.status,
            hoursWorked: data.hoursWorked,
            overtimeHours: data.overtimeHours,
            notes: data.notes,
          },
        },
      })

      // Обновляем локальное состояние
      const dateStr = date.toISOString().split('T')[0]

      setEmployeeSchedules((prev) => {
        const currentSchedule = prev[employeeId] || []
        const existingRecordIndex = currentSchedule.findIndex((record) => record.date.split('T')[0] === dateStr)

        const newRecord: ScheduleRecord = {
          id: Date.now().toString(), // временный ID
          date: date.toISOString(),
          status: data.status,
          hoursWorked: data.hoursWorked,
          overtimeHours: data.overtimeHours,
          notes: data.notes,
          employee: {
            id: employeeId,
            firstName: '',
            lastName: '',
          },
        }

        let updatedSchedule
        if (existingRecordIndex >= 0) {
          // Обновляем существующую запись
          updatedSchedule = [...currentSchedule]
          updatedSchedule[existingRecordIndex] = {
            ...updatedSchedule[existingRecordIndex],
            ...newRecord,
          }
        } else {
          // Добавляем новую запись
          updatedSchedule = [...currentSchedule, newRecord]
        }

        return {
          ...prev,
          [employeeId]: updatedSchedule,
        }
      })

      toast.success('Данные дня обновлены')
    } catch (error) {
      console.error('Error updating day data:', error)
      toast.error('Ошибка при обновлении данных дня')
    }
  }

  const exportToCSV = useCallback(() => {
    const csvContent = [
      ['ФИО', 'Должность', 'Статус', 'Зарплата', 'Телефон', 'Email', 'Дата найма'],
      ...employees.map((emp: Employee) => [
        `${emp.firstName} ${emp.lastName}`,
        emp.position,
        emp.status === 'ACTIVE'
          ? 'Активен'
          : emp.status === 'VACATION'
            ? 'В отпуске'
            : emp.status === 'SICK'
              ? 'На больничном'
              : 'Уволен',
        emp.salary?.toString() || '',
        emp.phone,
        emp.email || '',
        new Date(emp.hireDate).toLocaleDateString('ru-RU'),
      ]),
    ]
      .map((row) => row.join(','))
      .join('\n')

    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
    const link = document.createElement('a')
    const url = URL.createObjectURL(blob)
    link.setAttribute('href', url)
    link.setAttribute('download', `employees_report_${new Date().toISOString().split('T')[0]}.csv`)
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    toast.success('Отчет успешно экспортирован')
  }, [employees])

  const generateReport = useCallback(() => {
    const stats = {
      total: employees.length,
      active: employees.filter((e: Employee) => e.status === 'ACTIVE').length,
      vacation: employees.filter((e: Employee) => e.status === 'VACATION').length,
      sick: employees.filter((e: Employee) => e.status === 'SICK').length,
      inactive: employees.filter((e: Employee) => e.status === 'FIRED').length,
      avgSalary: Math.round(
        employees.reduce((sum: number, e: Employee) => sum + (e.salary || 0), 0) / employees.length,
      ),
    }

    const reportText = `
ОТЧЕТ ПО СОТРУДНИКАМ
Дата: ${new Date().toLocaleDateString('ru-RU')}

ОБЩАЯ СТАТИСТИКА:
• Всего сотрудников: ${stats.total}
• Активных: ${stats.active}
• В отпуске: ${stats.vacation}
• На больничном: ${stats.sick}
• Неактивных: ${stats.inactive}
• Средняя зарплата: ${stats.avgSalary.toLocaleString('ru-RU')} ₽

СПИСОК СОТРУДНИКОВ:
${employees.map((emp: Employee) => `• ${emp.firstName} ${emp.lastName} - ${emp.position}`).join('\n')}
    `.trim()

    const blob = new Blob([reportText], { type: 'text/plain;charset=utf-8;' })
    const link = document.createElement('a')
    const url = URL.createObjectURL(blob)
    link.setAttribute('href', url)
    link.setAttribute('download', `employees_summary_${new Date().toISOString().split('T')[0]}.txt`)
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    toast.success('Сводный отчет создан')
  }, [employees])

  if (loading) {
    return (
      <div className="min-h-screen flex">
        <Sidebar />
        <main className="flex-1 ml-56 p-6">
          <div className="max-w-7xl mx-auto">
            <div className="flex items-center justify-center h-64">
              <div className="text-white text-xl">Загрузка сотрудников...</div>
            </div>
          </div>
        </main>
      </div>
    )
  }

  return (
    <div className="min-h-screen flex">
      <Sidebar />
      <main className="flex-1 ml-56 p-6">
        <div className="max-w-7xl mx-auto">
          {/* Панель управления с улучшенным расположением */}
          <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
            <div className="flex items-center justify-between gap-6 mb-6">
              {/* Красивые табы слева */}
              <TabsList className="glass-card inline-flex h-10 items-center justify-center rounded-lg bg-white/5 p-1">
                <TabsTrigger
                  value="combined"
                  className="text-white data-[state=active]:bg-white/20 cursor-pointer text-sm px-4 py-2 rounded-md transition-all"
                >
                  <Users className="h-4 w-4 mr-2" />
                  Сотрудники
                </TabsTrigger>
                <TabsTrigger
                  value="reports"
                  className="text-white data-[state=active]:bg-white/20 cursor-pointer text-sm px-4 py-2 rounded-md transition-all"
                >
                  <FileText className="h-4 w-4 mr-2" />
                  Отчеты
                </TabsTrigger>
              </TabsList>

              {/* Поиск и кнопки справа */}
              <div className="flex items-center gap-4">
                {/* Увеличенный поиск */}
                <div className="w-80">
                  <EmployeeSearch searchQuery={searchQuery} onSearchChange={setSearchQuery} />
                </div>

                {/* Кнопки управления */}
                {showAddForm && (
                  <Button
                    onClick={() => setShowCompactForm(!showCompactForm)}
                    variant="outline"
                    size="sm"
                    className="border-white/20 text-white/80 hover:bg-white/10 hover:text-white transition-all duration-300"
                  >
                    {showCompactForm ? (
                      <>
                        <LayoutGrid className="h-4 w-4 mr-2" />
                        Полная форма
                      </>
                    ) : (
                      <>
                        <Layout className="h-4 w-4 mr-2" />
                        Компактная форма
                      </>
                    )}
                  </Button>
                )}

                <Button
                  onClick={() => setShowAddForm(!showAddForm)}
                  className="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white border-0 shadow-lg shadow-purple-500/25 transition-all duration-300"
                >
                  <Plus className="h-4 w-4 mr-2" />
                  {showAddForm ? 'Скрыть форму' : 'Добавить'}
                </Button>
              </div>
            </div>

            {/* Форма добавления сотрудника */}
            {showAddForm &&
              (showCompactForm ? (
                <EmployeeCompactForm
                  onSave={handleCreateEmployee}
                  onCancel={() => setShowAddForm(false)}
                  isLoading={createLoading}
                />
              ) : (
                <EmployeeInlineForm
                  onSave={handleCreateEmployee}
                  onCancel={() => setShowAddForm(false)}
                  isLoading={createLoading}
                />
              ))}

            {/* Форма редактирования сотрудника */}
            {showEditForm && editingEmployee && (
              <EmployeeEditInlineForm
                employee={editingEmployee}
                onSave={handleEmployeeSaved}
                onCancel={() => {
                  setShowEditForm(false)
                  setEditingEmployee(null)
                }}
                isLoading={createLoading}
              />
            )}

            {/* Контент табов */}
            <TabsContent value="combined">
              <Card className="glass-card p-6">
                {filteredEmployees.length === 0 ? (
                  <EmployeeEmptyState searchQuery={searchQuery} onShowAddForm={() => setShowAddForm(true)} />
                ) : (
                  <div className="space-y-6">
                    {/* Навигация по месяцам и легенда в одной строке */}
                    <div className="flex items-center justify-between mb-6">
                      <div className="flex items-center gap-4">
                        <h3 className="text-white font-medium text-lg capitalize">
                          {new Date().toLocaleDateString('ru-RU', {
                            weekday: 'long',
                            day: 'numeric',
                            month: 'long',
                            year: 'numeric',
                          })}
                        </h3>

                        {/* Кнопки навигации */}
                        <div className="flex gap-2">
                          <Button
                            variant="outline"
                            size="sm"
                            className="glass-secondary text-white hover:text-white h-8 px-3"
                            onClick={() => {
                              const newDate = new Date(currentYear, currentMonth - 1)
                              setCurrentYear(newDate.getFullYear())
                              setCurrentMonth(newDate.getMonth())
                            }}
                          >
                            ←
                          </Button>
                          <Button
                            variant="outline"
                            size="sm"
                            className="glass-secondary text-white hover:text-white h-8 px-3"
                            onClick={() => {
                              const today = new Date()
                              setCurrentYear(today.getFullYear())
                              setCurrentMonth(today.getMonth())
                            }}
                          >
                            Сегодня
                          </Button>
                          <Button
                            variant="outline"
                            size="sm"
                            className="glass-secondary text-white hover:text-white h-8 px-3"
                            onClick={() => {
                              const newDate = new Date(currentYear, currentMonth + 1)
                              setCurrentYear(newDate.getFullYear())
                              setCurrentMonth(newDate.getMonth())
                            }}
                          >
                            →
                          </Button>
                        </div>
                      </div>

                      {/* Легенда статусов справа */}
                      <EmployeeLegend />
                    </div>

                    {/* Компактный список сотрудников с раскрывающимся табелем */}
                    <div>
                      {filteredEmployees.map((employee: Employee, index: number) => (
                        <div key={employee.id} className={index < filteredEmployees.length - 1 ? 'mb-4' : ''}>
                          <EmployeeRow
                            employee={employee}
                            employeeSchedules={employeeSchedules}
                            currentYear={currentYear}
                            currentMonth={currentMonth}
                            onEdit={handleEditEmployee}
                            onDelete={handleEmployeeDeleted}
                            onDayStatusChange={changeDayStatus}
                            onDayUpdate={updateDayData}
                            deletingEmployeeId={deletingEmployeeId}
                          />
                        </div>
                      ))}
                    </div>
                  </div>
                )}
              </Card>
            </TabsContent>

            <TabsContent value="reports">
              <EmployeeReports
                employees={employees}
                onShowAddForm={() => setShowAddForm(true)}
                onExportCSV={exportToCSV}
                onGenerateReport={generateReport}
              />
            </TabsContent>
          </Tabs>
        </div>
      </main>
    </div>
  )
})

EmployeesDashboard.displayName = 'EmployeesDashboard'

export { EmployeesDashboard }
