import React, { ReactElement, useEffect } from 'react';
import Head from 'next/head';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import dayjs from 'dayjs';
import { useAppDispatch, useAppSelector } from '../../stores/hooks';
import { useRouter } from 'next/router';
import { fetch } from '../../stores/employees/employeesSlice';
import { saveFile } from '../../helpers/fileSaver';
import dataFormatter from '../../helpers/dataFormatter';
import ImageField from '../../components/ImageField';
import LayoutAuthenticated from '../../layouts/Authenticated';
import { getPageTitle } from '../../config';
import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
import SectionMain from '../../components/SectionMain';
import CardBox from '../../components/CardBox';
import BaseButton from '../../components/BaseButton';
import BaseDivider from '../../components/BaseDivider';
import { mdiChartTimelineVariant } from '@mdi/js';
import { SwitchField } from '../../components/SwitchField';
import FormField from '../../components/FormField';

import { hasPermission } from '../../helpers/userPermissions';

const EmployeesView = () => {
  const router = useRouter();
  const dispatch = useAppDispatch();
  const { employees } = useAppSelector((state) => state.employees);

  const { currentUser } = useAppSelector((state) => state.auth);

  const { id } = router.query;

  function removeLastCharacter(str) {
    console.log(str, `str`);
    return str.slice(0, -1);
  }

  useEffect(() => {
    dispatch(fetch({ id }));
  }, [dispatch, id]);

  return (
    <>
      <Head>
        <title>{getPageTitle('View employees')}</title>
      </Head>
      <SectionMain>
        <SectionTitleLineWithButton
          icon={mdiChartTimelineVariant}
          title={removeLastCharacter('View employees')}
          main
        >
          <BaseButton
            color='info'
            label='Edit'
            href={`/employees/employees-edit/?id=${id}`}
          />
        </SectionTitleLineWithButton>
        <CardBox>
          <div className={'mb-4'}>
            <p className={'block font-bold mb-2'}>User</p>

            <p>{employees?.user?.firstName ?? 'No data'}</p>
          </div>

          <>
            <p className={'block font-bold mb-2'}>Employments</p>
            <CardBox
              className='mb-6 border border-gray-300 rounded overflow-hidden'
              hasTable
            >
              <div className='overflow-x-auto'>
                <table>
                  <thead>
                    <tr>
                      <th>EmploymentType</th>

                      <th>StartDate</th>

                      <th>EndDate</th>

                      <th>FTE</th>

                      <th>Status</th>
                    </tr>
                  </thead>
                  <tbody>
                    {employees.employments &&
                      Array.isArray(employees.employments) &&
                      employees.employments.map((item: any) => (
                        <tr
                          key={item.id}
                          onClick={() =>
                            router.push(
                              `/employments/employments-view/?id=${item.id}`,
                            )
                          }
                        >
                          <td data-label='employment_type'>
                            {item.employment_type}
                          </td>

                          <td data-label='start_date'>
                            {dataFormatter.dateTimeFormatter(item.start_date)}
                          </td>

                          <td data-label='end_date'>
                            {dataFormatter.dateTimeFormatter(item.end_date)}
                          </td>

                          <td data-label='fte'>{item.fte}</td>

                          <td data-label='status'>{item.status}</td>
                        </tr>
                      ))}
                  </tbody>
                </table>
              </div>
              {!employees?.employments?.length && (
                <div className={'text-center py-4'}>No data</div>
              )}
            </CardBox>
          </>

          <>
            <p className={'block font-bold mb-2'}>Positions</p>
            <CardBox
              className='mb-6 border border-gray-300 rounded overflow-hidden'
              hasTable
            >
              <div className='overflow-x-auto'>
                <table>
                  <thead>
                    <tr>
                      <th>Title</th>

                      <th>JobFamily</th>

                      <th>Level</th>
                    </tr>
                  </thead>
                  <tbody>
                    {employees.positions &&
                      Array.isArray(employees.positions) &&
                      employees.positions.map((item: any) => (
                        <tr
                          key={item.id}
                          onClick={() =>
                            router.push(
                              `/positions/positions-view/?id=${item.id}`,
                            )
                          }
                        >
                          <td data-label='title'>{item.title}</td>

                          <td data-label='job_family'>{item.job_family}</td>

                          <td data-label='level'>{item.level}</td>
                        </tr>
                      ))}
                  </tbody>
                </table>
              </div>
              {!employees?.positions?.length && (
                <div className={'text-center py-4'}>No data</div>
              )}
            </CardBox>
          </>

          <>
            <p className={'block font-bold mb-2'}>Compensations</p>
            <CardBox
              className='mb-6 border border-gray-300 rounded overflow-hidden'
              hasTable
            >
              <div className='overflow-x-auto'>
                <table>
                  <thead>
                    <tr>
                      <th>BasePay</th>

                      <th>PayType</th>

                      <th>PayFrequency</th>

                      <th>Currency</th>

                      <th>EffectiveDate</th>
                    </tr>
                  </thead>
                  <tbody>
                    {employees.compensations &&
                      Array.isArray(employees.compensations) &&
                      employees.compensations.map((item: any) => (
                        <tr
                          key={item.id}
                          onClick={() =>
                            router.push(
                              `/compensations/compensations-view/?id=${item.id}`,
                            )
                          }
                        >
                          <td data-label='base_pay'>{item.base_pay}</td>

                          <td data-label='pay_type'>{item.pay_type}</td>

                          <td data-label='pay_frequency'>
                            {item.pay_frequency}
                          </td>

                          <td data-label='currency'>{item.currency}</td>

                          <td data-label='effective_date'>
                            {dataFormatter.dateTimeFormatter(
                              item.effective_date,
                            )}
                          </td>
                        </tr>
                      ))}
                  </tbody>
                </table>
              </div>
              {!employees?.compensations?.length && (
                <div className={'text-center py-4'}>No data</div>
              )}
            </CardBox>
          </>

          <>
            <p className={'block font-bold mb-2'}>Documents</p>
            <CardBox
              className='mb-6 border border-gray-300 rounded overflow-hidden'
              hasTable
            >
              <div className='overflow-x-auto'>
                <table>
                  <thead>
                    <tr>
                      <th>DocumentType</th>

                      <th>Country</th>

                      <th>Status</th>

                      <th>SignedAt</th>
                    </tr>
                  </thead>
                  <tbody>
                    {employees.documents &&
                      Array.isArray(employees.documents) &&
                      employees.documents.map((item: any) => (
                        <tr
                          key={item.id}
                          onClick={() =>
                            router.push(
                              `/documents/documents-view/?id=${item.id}`,
                            )
                          }
                        >
                          <td data-label='doc_type'>{item.doc_type}</td>

                          <td data-label='country'>{item.country}</td>

                          <td data-label='status'>{item.status}</td>

                          <td data-label='signed_at'>
                            {dataFormatter.dateTimeFormatter(item.signed_at)}
                          </td>
                        </tr>
                      ))}
                  </tbody>
                </table>
              </div>
              {!employees?.documents?.length && (
                <div className={'text-center py-4'}>No data</div>
              )}
            </CardBox>
          </>

          <div className={'mb-4'}>
            <p className={'block font-bold mb-2'}>organizations</p>

            <p>{employees?.organizations?.name ?? 'No data'}</p>
          </div>

          <>
            <p className={'block font-bold mb-2'}>App_accounts Employee</p>
            <CardBox
              className='mb-6 border border-gray-300 rounded overflow-hidden'
              hasTable
            >
              <div className='overflow-x-auto'>
                <table>
                  <thead>
                    <tr>
                      <th>Role</th>

                      <th>Status</th>
                    </tr>
                  </thead>
                  <tbody>
                    {employees.app_accounts_employee &&
                      Array.isArray(employees.app_accounts_employee) &&
                      employees.app_accounts_employee.map((item: any) => (
                        <tr
                          key={item.id}
                          onClick={() =>
                            router.push(
                              `/app_accounts/app_accounts-view/?id=${item.id}`,
                            )
                          }
                        >
                          <td data-label='role'>{item.role}</td>

                          <td data-label='status'>{item.status}</td>
                        </tr>
                      ))}
                  </tbody>
                </table>
              </div>
              {!employees?.app_accounts_employee?.length && (
                <div className={'text-center py-4'}>No data</div>
              )}
            </CardBox>
          </>

          <>
            <p className={'block font-bold mb-2'}>Approvals Approver</p>
            <CardBox
              className='mb-6 border border-gray-300 rounded overflow-hidden'
              hasTable
            >
              <div className='overflow-x-auto'>
                <table>
                  <thead>
                    <tr>
                      <th>ObjectType</th>

                      <th>ObjectID</th>

                      <th>Step</th>

                      <th>Status</th>

                      <th>Timestamp</th>
                    </tr>
                  </thead>
                  <tbody>
                    {employees.approvals_approver &&
                      Array.isArray(employees.approvals_approver) &&
                      employees.approvals_approver.map((item: any) => (
                        <tr
                          key={item.id}
                          onClick={() =>
                            router.push(
                              `/approvals/approvals-view/?id=${item.id}`,
                            )
                          }
                        >
                          <td data-label='object_type'>{item.object_type}</td>

                          <td data-label='object_id'>{item.object_id}</td>

                          <td data-label='step'>{item.step}</td>

                          <td data-label='status'>{item.status}</td>

                          <td data-label='timestamp'>
                            {dataFormatter.dateTimeFormatter(item.timestamp)}
                          </td>
                        </tr>
                      ))}
                  </tbody>
                </table>
              </div>
              {!employees?.approvals_approver?.length && (
                <div className={'text-center py-4'}>No data</div>
              )}
            </CardBox>
          </>

          <>
            <p className={'block font-bold mb-2'}>Cards Employee</p>
            <CardBox
              className='mb-6 border border-gray-300 rounded overflow-hidden'
              hasTable
            >
              <div className='overflow-x-auto'>
                <table>
                  <thead>
                    <tr>
                      <th>Type</th>

                      <th>Last4Digits</th>

                      <th>Limit</th>

                      <th>Status</th>
                    </tr>
                  </thead>
                  <tbody>
                    {employees.cards_employee &&
                      Array.isArray(employees.cards_employee) &&
                      employees.cards_employee.map((item: any) => (
                        <tr
                          key={item.id}
                          onClick={() =>
                            router.push(`/cards/cards-view/?id=${item.id}`)
                          }
                        >
                          <td data-label='type'>{item.type}</td>

                          <td data-label='last4'>{item.last4}</td>

                          <td data-label='limit'>{item.limit}</td>

                          <td data-label='status'>{item.status}</td>
                        </tr>
                      ))}
                  </tbody>
                </table>
              </div>
              {!employees?.cards_employee?.length && (
                <div className={'text-center py-4'}>No data</div>
              )}
            </CardBox>
          </>

          <>
            <p className={'block font-bold mb-2'}>Compensations Employee</p>
            <CardBox
              className='mb-6 border border-gray-300 rounded overflow-hidden'
              hasTable
            >
              <div className='overflow-x-auto'>
                <table>
                  <thead>
                    <tr>
                      <th>BasePay</th>

                      <th>PayType</th>

                      <th>PayFrequency</th>

                      <th>Currency</th>

                      <th>EffectiveDate</th>
                    </tr>
                  </thead>
                  <tbody>
                    {employees.compensations_employee &&
                      Array.isArray(employees.compensations_employee) &&
                      employees.compensations_employee.map((item: any) => (
                        <tr
                          key={item.id}
                          onClick={() =>
                            router.push(
                              `/compensations/compensations-view/?id=${item.id}`,
                            )
                          }
                        >
                          <td data-label='base_pay'>{item.base_pay}</td>

                          <td data-label='pay_type'>{item.pay_type}</td>

                          <td data-label='pay_frequency'>
                            {item.pay_frequency}
                          </td>

                          <td data-label='currency'>{item.currency}</td>

                          <td data-label='effective_date'>
                            {dataFormatter.dateTimeFormatter(
                              item.effective_date,
                            )}
                          </td>
                        </tr>
                      ))}
                  </tbody>
                </table>
              </div>
              {!employees?.compensations_employee?.length && (
                <div className={'text-center py-4'}>No data</div>
              )}
            </CardBox>
          </>

          <>
            <p className={'block font-bold mb-2'}>Deductions Employee</p>
            <CardBox
              className='mb-6 border border-gray-300 rounded overflow-hidden'
              hasTable
            >
              <div className='overflow-x-auto'>
                <table>
                  <thead>
                    <tr>
                      <th>Type</th>

                      <th>Amount</th>
                    </tr>
                  </thead>
                  <tbody>
                    {employees.deductions_employee &&
                      Array.isArray(employees.deductions_employee) &&
                      employees.deductions_employee.map((item: any) => (
                        <tr
                          key={item.id}
                          onClick={() =>
                            router.push(
                              `/deductions/deductions-view/?id=${item.id}`,
                            )
                          }
                        >
                          <td data-label='type'>{item.type}</td>

                          <td data-label='amount'>{item.amount}</td>
                        </tr>
                      ))}
                  </tbody>
                </table>
              </div>
              {!employees?.deductions_employee?.length && (
                <div className={'text-center py-4'}>No data</div>
              )}
            </CardBox>
          </>

          <>
            <p className={'block font-bold mb-2'}>Devices Owner</p>
            <CardBox
              className='mb-6 border border-gray-300 rounded overflow-hidden'
              hasTable
            >
              <div className='overflow-x-auto'>
                <table>
                  <thead>
                    <tr>
                      <th>Type</th>

                      <th>Platform</th>

                      <th>Serial</th>

                      <th>AssetTag</th>

                      <th>Status</th>

                      <th>Encryption</th>

                      <th>OSVersion</th>
                    </tr>
                  </thead>
                  <tbody>
                    {employees.devices_owner &&
                      Array.isArray(employees.devices_owner) &&
                      employees.devices_owner.map((item: any) => (
                        <tr
                          key={item.id}
                          onClick={() =>
                            router.push(`/devices/devices-view/?id=${item.id}`)
                          }
                        >
                          <td data-label='type'>{item.type}</td>

                          <td data-label='platform'>{item.platform}</td>

                          <td data-label='serial'>{item.serial}</td>

                          <td data-label='asset_tag'>{item.asset_tag}</td>

                          <td data-label='status'>{item.status}</td>

                          <td data-label='encryption'>
                            {dataFormatter.booleanFormatter(item.encryption)}
                          </td>

                          <td data-label='os_version'>{item.os_version}</td>
                        </tr>
                      ))}
                  </tbody>
                </table>
              </div>
              {!employees?.devices_owner?.length && (
                <div className={'text-center py-4'}>No data</div>
              )}
            </CardBox>
          </>

          <>
            <p className={'block font-bold mb-2'}>Documents Owner</p>
            <CardBox
              className='mb-6 border border-gray-300 rounded overflow-hidden'
              hasTable
            >
              <div className='overflow-x-auto'>
                <table>
                  <thead>
                    <tr>
                      <th>DocumentType</th>

                      <th>Country</th>

                      <th>Status</th>

                      <th>SignedAt</th>
                    </tr>
                  </thead>
                  <tbody>
                    {employees.documents_owner &&
                      Array.isArray(employees.documents_owner) &&
                      employees.documents_owner.map((item: any) => (
                        <tr
                          key={item.id}
                          onClick={() =>
                            router.push(
                              `/documents/documents-view/?id=${item.id}`,
                            )
                          }
                        >
                          <td data-label='doc_type'>{item.doc_type}</td>

                          <td data-label='country'>{item.country}</td>

                          <td data-label='status'>{item.status}</td>

                          <td data-label='signed_at'>
                            {dataFormatter.dateTimeFormatter(item.signed_at)}
                          </td>
                        </tr>
                      ))}
                  </tbody>
                </table>
              </div>
              {!employees?.documents_owner?.length && (
                <div className={'text-center py-4'}>No data</div>
              )}
            </CardBox>
          </>

          <>
            <p className={'block font-bold mb-2'}>Earnings Employee</p>
            <CardBox
              className='mb-6 border border-gray-300 rounded overflow-hidden'
              hasTable
            >
              <div className='overflow-x-auto'>
                <table>
                  <thead>
                    <tr>
                      <th>Component</th>

                      <th>Units</th>

                      <th>Rate</th>

                      <th>Amount</th>

                      <th>Currency</th>

                      <th>Taxable</th>
                    </tr>
                  </thead>
                  <tbody>
                    {employees.earnings_employee &&
                      Array.isArray(employees.earnings_employee) &&
                      employees.earnings_employee.map((item: any) => (
                        <tr
                          key={item.id}
                          onClick={() =>
                            router.push(
                              `/earnings/earnings-view/?id=${item.id}`,
                            )
                          }
                        >
                          <td data-label='component'>{item.component}</td>

                          <td data-label='units'>{item.units}</td>

                          <td data-label='rate'>{item.rate}</td>

                          <td data-label='amount'>{item.amount}</td>

                          <td data-label='currency'>{item.currency}</td>

                          <td data-label='taxable'>
                            {dataFormatter.booleanFormatter(item.taxable)}
                          </td>
                        </tr>
                      ))}
                  </tbody>
                </table>
              </div>
              {!employees?.earnings_employee?.length && (
                <div className={'text-center py-4'}>No data</div>
              )}
            </CardBox>
          </>

          <>
            <p className={'block font-bold mb-2'}>Employments Employee</p>
            <CardBox
              className='mb-6 border border-gray-300 rounded overflow-hidden'
              hasTable
            >
              <div className='overflow-x-auto'>
                <table>
                  <thead>
                    <tr>
                      <th>EmploymentType</th>

                      <th>StartDate</th>

                      <th>EndDate</th>

                      <th>FTE</th>

                      <th>Status</th>
                    </tr>
                  </thead>
                  <tbody>
                    {employees.employments_employee &&
                      Array.isArray(employees.employments_employee) &&
                      employees.employments_employee.map((item: any) => (
                        <tr
                          key={item.id}
                          onClick={() =>
                            router.push(
                              `/employments/employments-view/?id=${item.id}`,
                            )
                          }
                        >
                          <td data-label='employment_type'>
                            {item.employment_type}
                          </td>

                          <td data-label='start_date'>
                            {dataFormatter.dateTimeFormatter(item.start_date)}
                          </td>

                          <td data-label='end_date'>
                            {dataFormatter.dateTimeFormatter(item.end_date)}
                          </td>

                          <td data-label='fte'>{item.fte}</td>

                          <td data-label='status'>{item.status}</td>
                        </tr>
                      ))}
                  </tbody>
                </table>
              </div>
              {!employees?.employments_employee?.length && (
                <div className={'text-center py-4'}>No data</div>
              )}
            </CardBox>
          </>

          <>
            <p className={'block font-bold mb-2'}>
              Enrollment_learnings Employee
            </p>
            <CardBox
              className='mb-6 border border-gray-300 rounded overflow-hidden'
              hasTable
            >
              <div className='overflow-x-auto'>
                <table>
                  <thead>
                    <tr>
                      <th>DueDate</th>

                      <th>Status</th>
                    </tr>
                  </thead>
                  <tbody>
                    {employees.enrollment_learnings_employee &&
                      Array.isArray(employees.enrollment_learnings_employee) &&
                      employees.enrollment_learnings_employee.map(
                        (item: any) => (
                          <tr
                            key={item.id}
                            onClick={() =>
                              router.push(
                                `/enrollment_learnings/enrollment_learnings-view/?id=${item.id}`,
                              )
                            }
                          >
                            <td data-label='due_date'>
                              {dataFormatter.dateTimeFormatter(item.due_date)}
                            </td>

                            <td data-label='status'>{item.status}</td>
                          </tr>
                        ),
                      )}
                  </tbody>
                </table>
              </div>
              {!employees?.enrollment_learnings_employee?.length && (
                <div className={'text-center py-4'}>No data</div>
              )}
            </CardBox>
          </>

          <>
            <p className={'block font-bold mb-2'}>
              Enrollment_learnings AssignedBy
            </p>
            <CardBox
              className='mb-6 border border-gray-300 rounded overflow-hidden'
              hasTable
            >
              <div className='overflow-x-auto'>
                <table>
                  <thead>
                    <tr>
                      <th>DueDate</th>

                      <th>Status</th>
                    </tr>
                  </thead>
                  <tbody>
                    {employees.enrollment_learnings_assigned_by &&
                      Array.isArray(
                        employees.enrollment_learnings_assigned_by,
                      ) &&
                      employees.enrollment_learnings_assigned_by.map(
                        (item: any) => (
                          <tr
                            key={item.id}
                            onClick={() =>
                              router.push(
                                `/enrollment_learnings/enrollment_learnings-view/?id=${item.id}`,
                              )
                            }
                          >
                            <td data-label='due_date'>
                              {dataFormatter.dateTimeFormatter(item.due_date)}
                            </td>

                            <td data-label='status'>{item.status}</td>
                          </tr>
                        ),
                      )}
                  </tbody>
                </table>
              </div>
              {!employees?.enrollment_learnings_assigned_by?.length && (
                <div className={'text-center py-4'}>No data</div>
              )}
            </CardBox>
          </>

          <>
            <p className={'block font-bold mb-2'}>Enrollments Employee</p>
            <CardBox
              className='mb-6 border border-gray-300 rounded overflow-hidden'
              hasTable
            >
              <div className='overflow-x-auto'>
                <table>
                  <thead>
                    <tr>
                      <th>EffectiveDate</th>

                      <th>PremiumEmployee</th>

                      <th>PremiumEmployer</th>

                      <th>Status</th>
                    </tr>
                  </thead>
                  <tbody>
                    {employees.enrollments_employee &&
                      Array.isArray(employees.enrollments_employee) &&
                      employees.enrollments_employee.map((item: any) => (
                        <tr
                          key={item.id}
                          onClick={() =>
                            router.push(
                              `/enrollments/enrollments-view/?id=${item.id}`,
                            )
                          }
                        >
                          <td data-label='effective_date'>
                            {dataFormatter.dateTimeFormatter(
                              item.effective_date,
                            )}
                          </td>

                          <td data-label='premium_employee'>
                            {item.premium_employee}
                          </td>

                          <td data-label='premium_employer'>
                            {item.premium_employer}
                          </td>

                          <td data-label='status'>{item.status}</td>
                        </tr>
                      ))}
                  </tbody>
                </table>
              </div>
              {!employees?.enrollments_employee?.length && (
                <div className={'text-center py-4'}>No data</div>
              )}
            </CardBox>
          </>

          <>
            <p className={'block font-bold mb-2'}>Expense_reports Employee</p>
            <CardBox
              className='mb-6 border border-gray-300 rounded overflow-hidden'
              hasTable
            >
              <div className='overflow-x-auto'>
                <table>
                  <thead>
                    <tr>
                      <th>SubmittedAt</th>

                      <th>Status</th>

                      <th>PolicyResult</th>
                    </tr>
                  </thead>
                  <tbody>
                    {employees.expense_reports_employee &&
                      Array.isArray(employees.expense_reports_employee) &&
                      employees.expense_reports_employee.map((item: any) => (
                        <tr
                          key={item.id}
                          onClick={() =>
                            router.push(
                              `/expense_reports/expense_reports-view/?id=${item.id}`,
                            )
                          }
                        >
                          <td data-label='submitted_at'>
                            {dataFormatter.dateTimeFormatter(item.submitted_at)}
                          </td>

                          <td data-label='status'>{item.status}</td>

                          <td data-label='policy_result'>
                            {item.policy_result}
                          </td>
                        </tr>
                      ))}
                  </tbody>
                </table>
              </div>
              {!employees?.expense_reports_employee?.length && (
                <div className={'text-center py-4'}>No data</div>
              )}
            </CardBox>
          </>

          <>
            <p className={'block font-bold mb-2'}>Goals Employee</p>
            <CardBox
              className='mb-6 border border-gray-300 rounded overflow-hidden'
              hasTable
            >
              <div className='overflow-x-auto'>
                <table>
                  <thead>
                    <tr>
                      <th>Type</th>

                      <th>Title</th>

                      <th>Metric</th>

                      <th>Target</th>

                      <th>Start</th>

                      <th>Due</th>

                      <th>Progress</th>
                    </tr>
                  </thead>
                  <tbody>
                    {employees.goals_employee &&
                      Array.isArray(employees.goals_employee) &&
                      employees.goals_employee.map((item: any) => (
                        <tr
                          key={item.id}
                          onClick={() =>
                            router.push(`/goals/goals-view/?id=${item.id}`)
                          }
                        >
                          <td data-label='type'>{item.type}</td>

                          <td data-label='title'>{item.title}</td>

                          <td data-label='metric'>{item.metric}</td>

                          <td data-label='target'>{item.target}</td>

                          <td data-label='start'>
                            {dataFormatter.dateTimeFormatter(item.start)}
                          </td>

                          <td data-label='due'>
                            {dataFormatter.dateTimeFormatter(item.due)}
                          </td>

                          <td data-label='progress'>{item.progress}</td>
                        </tr>
                      ))}
                  </tbody>
                </table>
              </div>
              {!employees?.goals_employee?.length && (
                <div className={'text-center py-4'}>No data</div>
              )}
            </CardBox>
          </>

          <>
            <p className={'block font-bold mb-2'}>Identity_accounts Employee</p>
            <CardBox
              className='mb-6 border border-gray-300 rounded overflow-hidden'
              hasTable
            >
              <div className='overflow-x-auto'>
                <table>
                  <thead>
                    <tr>
                      <th>IDP</th>

                      <th>Username</th>
                    </tr>
                  </thead>
                  <tbody>
                    {employees.identity_accounts_employee &&
                      Array.isArray(employees.identity_accounts_employee) &&
                      employees.identity_accounts_employee.map((item: any) => (
                        <tr
                          key={item.id}
                          onClick={() =>
                            router.push(
                              `/identity_accounts/identity_accounts-view/?id=${item.id}`,
                            )
                          }
                        >
                          <td data-label='idp'>{item.idp}</td>

                          <td data-label='username'>{item.username}</td>
                        </tr>
                      ))}
                  </tbody>
                </table>
              </div>
              {!employees?.identity_accounts_employee?.length && (
                <div className={'text-center py-4'}>No data</div>
              )}
            </CardBox>
          </>

          <>
            <p className={'block font-bold mb-2'}>Interviews Interviewer</p>
            <CardBox
              className='mb-6 border border-gray-300 rounded overflow-hidden'
              hasTable
            >
              <div className='overflow-x-auto'>
                <table>
                  <thead>
                    <tr>
                      <th>Type</th>

                      <th>ScheduledAt</th>

                      <th>Rating</th>

                      <th>Notes</th>
                    </tr>
                  </thead>
                  <tbody>
                    {employees.interviews_interviewer &&
                      Array.isArray(employees.interviews_interviewer) &&
                      employees.interviews_interviewer.map((item: any) => (
                        <tr
                          key={item.id}
                          onClick={() =>
                            router.push(
                              `/interviews/interviews-view/?id=${item.id}`,
                            )
                          }
                        >
                          <td data-label='type'>{item.type}</td>

                          <td data-label='scheduled_at'>
                            {dataFormatter.dateTimeFormatter(item.scheduled_at)}
                          </td>

                          <td data-label='rating'>{item.rating}</td>

                          <td data-label='notes'>{item.notes}</td>
                        </tr>
                      ))}
                  </tbody>
                </table>
              </div>
              {!employees?.interviews_interviewer?.length && (
                <div className={'text-center py-4'}>No data</div>
              )}
            </CardBox>
          </>

          <>
            <p className={'block font-bold mb-2'}>Job_requisitions Recruiter</p>
            <CardBox
              className='mb-6 border border-gray-300 rounded overflow-hidden'
              hasTable
            >
              <div className='overflow-x-auto'>
                <table>
                  <thead>
                    <tr>
                      <th>Title</th>

                      <th>EmploymentType</th>

                      <th>Openings</th>

                      <th>Status</th>
                    </tr>
                  </thead>
                  <tbody>
                    {employees.job_requisitions_recruiter &&
                      Array.isArray(employees.job_requisitions_recruiter) &&
                      employees.job_requisitions_recruiter.map((item: any) => (
                        <tr
                          key={item.id}
                          onClick={() =>
                            router.push(
                              `/job_requisitions/job_requisitions-view/?id=${item.id}`,
                            )
                          }
                        >
                          <td data-label='title'>{item.title}</td>

                          <td data-label='employment_type'>
                            {item.employment_type}
                          </td>

                          <td data-label='openings'>{item.openings}</td>

                          <td data-label='status'>{item.status}</td>
                        </tr>
                      ))}
                  </tbody>
                </table>
              </div>
              {!employees?.job_requisitions_recruiter?.length && (
                <div className={'text-center py-4'}>No data</div>
              )}
            </CardBox>
          </>

          <>
            <p className={'block font-bold mb-2'}>Leave_requests Employee</p>
            <CardBox
              className='mb-6 border border-gray-300 rounded overflow-hidden'
              hasTable
            >
              <div className='overflow-x-auto'>
                <table>
                  <thead>
                    <tr>
                      <th>Type</th>

                      <th>Start</th>

                      <th>End</th>

                      <th>Hours</th>

                      <th>Status</th>
                    </tr>
                  </thead>
                  <tbody>
                    {employees.leave_requests_employee &&
                      Array.isArray(employees.leave_requests_employee) &&
                      employees.leave_requests_employee.map((item: any) => (
                        <tr
                          key={item.id}
                          onClick={() =>
                            router.push(
                              `/leave_requests/leave_requests-view/?id=${item.id}`,
                            )
                          }
                        >
                          <td data-label='type'>{item.type}</td>

                          <td data-label='start'>
                            {dataFormatter.dateTimeFormatter(item.start)}
                          </td>

                          <td data-label='end'>
                            {dataFormatter.dateTimeFormatter(item.end)}
                          </td>

                          <td data-label='hours'>{item.hours}</td>

                          <td data-label='status'>{item.status}</td>
                        </tr>
                      ))}
                  </tbody>
                </table>
              </div>
              {!employees?.leave_requests_employee?.length && (
                <div className={'text-center py-4'}>No data</div>
              )}
            </CardBox>
          </>

          <>
            <p className={'block font-bold mb-2'}>Positions Manager</p>
            <CardBox
              className='mb-6 border border-gray-300 rounded overflow-hidden'
              hasTable
            >
              <div className='overflow-x-auto'>
                <table>
                  <thead>
                    <tr>
                      <th>Title</th>

                      <th>JobFamily</th>

                      <th>Level</th>
                    </tr>
                  </thead>
                  <tbody>
                    {employees.positions_manager &&
                      Array.isArray(employees.positions_manager) &&
                      employees.positions_manager.map((item: any) => (
                        <tr
                          key={item.id}
                          onClick={() =>
                            router.push(
                              `/positions/positions-view/?id=${item.id}`,
                            )
                          }
                        >
                          <td data-label='title'>{item.title}</td>

                          <td data-label='job_family'>{item.job_family}</td>

                          <td data-label='level'>{item.level}</td>
                        </tr>
                      ))}
                  </tbody>
                </table>
              </div>
              {!employees?.positions_manager?.length && (
                <div className={'text-center py-4'}>No data</div>
              )}
            </CardBox>
          </>

          <>
            <p className={'block font-bold mb-2'}>Reviews Employee</p>
            <CardBox
              className='mb-6 border border-gray-300 rounded overflow-hidden'
              hasTable
            >
              <div className='overflow-x-auto'>
                <table>
                  <thead>
                    <tr>
                      <th>Comments</th>
                    </tr>
                  </thead>
                  <tbody>
                    {employees.reviews_employee &&
                      Array.isArray(employees.reviews_employee) &&
                      employees.reviews_employee.map((item: any) => (
                        <tr
                          key={item.id}
                          onClick={() =>
                            router.push(`/reviews/reviews-view/?id=${item.id}`)
                          }
                        >
                          <td data-label='comments'>{item.comments}</td>
                        </tr>
                      ))}
                  </tbody>
                </table>
              </div>
              {!employees?.reviews_employee?.length && (
                <div className={'text-center py-4'}>No data</div>
              )}
            </CardBox>
          </>

          <>
            <p className={'block font-bold mb-2'}>Reviews Reviewer</p>
            <CardBox
              className='mb-6 border border-gray-300 rounded overflow-hidden'
              hasTable
            >
              <div className='overflow-x-auto'>
                <table>
                  <thead>
                    <tr>
                      <th>Comments</th>
                    </tr>
                  </thead>
                  <tbody>
                    {employees.reviews_reviewer &&
                      Array.isArray(employees.reviews_reviewer) &&
                      employees.reviews_reviewer.map((item: any) => (
                        <tr
                          key={item.id}
                          onClick={() =>
                            router.push(`/reviews/reviews-view/?id=${item.id}`)
                          }
                        >
                          <td data-label='comments'>{item.comments}</td>
                        </tr>
                      ))}
                  </tbody>
                </table>
              </div>
              {!employees?.reviews_reviewer?.length && (
                <div className={'text-center py-4'}>No data</div>
              )}
            </CardBox>
          </>

          <>
            <p className={'block font-bold mb-2'}>Schedule_shifts Employee</p>
            <CardBox
              className='mb-6 border border-gray-300 rounded overflow-hidden'
              hasTable
            >
              <div className='overflow-x-auto'>
                <table>
                  <thead>
                    <tr>
                      <th>Date</th>

                      <th>Start</th>

                      <th>End</th>

                      <th>Role</th>
                    </tr>
                  </thead>
                  <tbody>
                    {employees.schedule_shifts_employee &&
                      Array.isArray(employees.schedule_shifts_employee) &&
                      employees.schedule_shifts_employee.map((item: any) => (
                        <tr
                          key={item.id}
                          onClick={() =>
                            router.push(
                              `/schedule_shifts/schedule_shifts-view/?id=${item.id}`,
                            )
                          }
                        >
                          <td data-label='date'>
                            {dataFormatter.dateTimeFormatter(item.date)}
                          </td>

                          <td data-label='start'>
                            {dataFormatter.dateTimeFormatter(item.start)}
                          </td>

                          <td data-label='end'>
                            {dataFormatter.dateTimeFormatter(item.end)}
                          </td>

                          <td data-label='role'>{item.role}</td>
                        </tr>
                      ))}
                  </tbody>
                </table>
              </div>
              {!employees?.schedule_shifts_employee?.length && (
                <div className={'text-center py-4'}>No data</div>
              )}
            </CardBox>
          </>

          <>
            <p className={'block font-bold mb-2'}>Taxes Employee</p>
            <CardBox
              className='mb-6 border border-gray-300 rounded overflow-hidden'
              hasTable
            >
              <div className='overflow-x-auto'>
                <table>
                  <thead>
                    <tr>
                      <th>Jurisdiction</th>

                      <th>Amount</th>
                    </tr>
                  </thead>
                  <tbody>
                    {employees.taxes_employee &&
                      Array.isArray(employees.taxes_employee) &&
                      employees.taxes_employee.map((item: any) => (
                        <tr
                          key={item.id}
                          onClick={() =>
                            router.push(`/taxes/taxes-view/?id=${item.id}`)
                          }
                        >
                          <td data-label='jurisdiction'>{item.jurisdiction}</td>

                          <td data-label='amount'>{item.amount}</td>
                        </tr>
                      ))}
                  </tbody>
                </table>
              </div>
              {!employees?.taxes_employee?.length && (
                <div className={'text-center py-4'}>No data</div>
              )}
            </CardBox>
          </>

          <>
            <p className={'block font-bold mb-2'}>Timecards Employee</p>
            <CardBox
              className='mb-6 border border-gray-300 rounded overflow-hidden'
              hasTable
            >
              <div className='overflow-x-auto'>
                <table>
                  <thead>
                    <tr>
                      <th>Period</th>

                      <th>Status</th>
                    </tr>
                  </thead>
                  <tbody>
                    {employees.timecards_employee &&
                      Array.isArray(employees.timecards_employee) &&
                      employees.timecards_employee.map((item: any) => (
                        <tr
                          key={item.id}
                          onClick={() =>
                            router.push(
                              `/timecards/timecards-view/?id=${item.id}`,
                            )
                          }
                        >
                          <td data-label='period'>{item.period}</td>

                          <td data-label='status'>{item.status}</td>
                        </tr>
                      ))}
                  </tbody>
                </table>
              </div>
              {!employees?.timecards_employee?.length && (
                <div className={'text-center py-4'}>No data</div>
              )}
            </CardBox>
          </>

          <>
            <p className={'block font-bold mb-2'}>Travel_bookings Employee</p>
            <CardBox
              className='mb-6 border border-gray-300 rounded overflow-hidden'
              hasTable
            >
              <div className='overflow-x-auto'>
                <table>
                  <thead>
                    <tr>
                      <th>Type</th>

                      <th>Provider</th>

                      <th>Start</th>

                      <th>End</th>

                      <th>Cost</th>

                      <th>PolicyResult</th>
                    </tr>
                  </thead>
                  <tbody>
                    {employees.travel_bookings_employee &&
                      Array.isArray(employees.travel_bookings_employee) &&
                      employees.travel_bookings_employee.map((item: any) => (
                        <tr
                          key={item.id}
                          onClick={() =>
                            router.push(
                              `/travel_bookings/travel_bookings-view/?id=${item.id}`,
                            )
                          }
                        >
                          <td data-label='type'>{item.type}</td>

                          <td data-label='provider'>{item.provider}</td>

                          <td data-label='start'>
                            {dataFormatter.dateTimeFormatter(item.start)}
                          </td>

                          <td data-label='end'>
                            {dataFormatter.dateTimeFormatter(item.end)}
                          </td>

                          <td data-label='cost'>{item.cost}</td>

                          <td data-label='policy_result'>
                            {item.policy_result}
                          </td>
                        </tr>
                      ))}
                  </tbody>
                </table>
              </div>
              {!employees?.travel_bookings_employee?.length && (
                <div className={'text-center py-4'}>No data</div>
              )}
            </CardBox>
          </>

          <BaseDivider />

          <BaseButton
            color='info'
            label='Back'
            onClick={() => router.push('/employees/employees-list')}
          />
        </CardBox>
      </SectionMain>
    </>
  );
};

EmployeesView.getLayout = function getLayout(page: ReactElement) {
  return (
    <LayoutAuthenticated permission={'READ_EMPLOYEES'}>
      {page}
    </LayoutAuthenticated>
  );
};

export default EmployeesView;
