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/organizations/organizationsSlice';
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 OrganizationsView = () => {
  const router = useRouter();
  const dispatch = useAppDispatch();
  const { organizations } = useAppSelector((state) => state.organizations);

  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 organizations')}</title>
      </Head>
      <SectionMain>
        <SectionTitleLineWithButton
          icon={mdiChartTimelineVariant}
          title={removeLastCharacter('View organizations')}
          main
        >
          <BaseButton
            color='info'
            label='Edit'
            href={`/organizations/organizations-edit/?id=${id}`}
          />
        </SectionTitleLineWithButton>
        <CardBox>
          <div className={'mb-4'}>
            <p className={'block font-bold mb-2'}>Name</p>
            <p>{organizations?.name}</p>
          </div>

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

                      <th>Last Name</th>

                      <th>Phone Number</th>

                      <th>E-Mail</th>

                      <th>Disabled</th>
                    </tr>
                  </thead>
                  <tbody>
                    {organizations.users_organizations &&
                      Array.isArray(organizations.users_organizations) &&
                      organizations.users_organizations.map((item: any) => (
                        <tr
                          key={item.id}
                          onClick={() =>
                            router.push(`/users/users-view/?id=${item.id}`)
                          }
                        >
                          <td data-label='firstName'>{item.firstName}</td>

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

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

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

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

          <>
            <p className={'block font-bold mb-2'}>App_accounts organizations</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>
                    {organizations.app_accounts_organizations &&
                      Array.isArray(organizations.app_accounts_organizations) &&
                      organizations.app_accounts_organizations.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>
              {!organizations?.app_accounts_organizations?.length && (
                <div className={'text-center py-4'}>No data</div>
              )}
            </CardBox>
          </>

          <>
            <p className={'block font-bold mb-2'}>Applications organizations</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>
                    </tr>
                  </thead>
                  <tbody>
                    {organizations.applications_organizations &&
                      Array.isArray(organizations.applications_organizations) &&
                      organizations.applications_organizations.map(
                        (item: any) => (
                          <tr
                            key={item.id}
                            onClick={() =>
                              router.push(
                                `/applications/applications-view/?id=${item.id}`,
                              )
                            }
                          >
                            <td data-label='submitted_at'>
                              {dataFormatter.dateTimeFormatter(
                                item.submitted_at,
                              )}
                            </td>

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

          <>
            <p className={'block font-bold mb-2'}>Approvals organizations</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>
                    {organizations.approvals_organizations &&
                      Array.isArray(organizations.approvals_organizations) &&
                      organizations.approvals_organizations.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>
              {!organizations?.approvals_organizations?.length && (
                <div className={'text-center py-4'}>No data</div>
              )}
            </CardBox>
          </>

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

                      <th>Action</th>

                      <th>ObjectType</th>

                      <th>ObjectID</th>

                      <th>Timestamp</th>

                      <th>Diff</th>
                    </tr>
                  </thead>
                  <tbody>
                    {organizations.audit_logs_organizations &&
                      Array.isArray(organizations.audit_logs_organizations) &&
                      organizations.audit_logs_organizations.map(
                        (item: any) => (
                          <tr
                            key={item.id}
                            onClick={() =>
                              router.push(
                                `/audit_logs/audit_logs-view/?id=${item.id}`,
                              )
                            }
                          >
                            <td data-label='actor'>{item.actor}</td>

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

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

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

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

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

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

                      <th>PlanType</th>

                      <th>Country</th>

                      <th>Currency</th>
                    </tr>
                  </thead>
                  <tbody>
                    {organizations.benefit_plans_organizations &&
                      Array.isArray(
                        organizations.benefit_plans_organizations,
                      ) &&
                      organizations.benefit_plans_organizations.map(
                        (item: any) => (
                          <tr
                            key={item.id}
                            onClick={() =>
                              router.push(
                                `/benefit_plans/benefit_plans-view/?id=${item.id}`,
                              )
                            }
                          >
                            <td data-label='carrier'>{item.carrier}</td>

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

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

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

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

                      <th>InvoiceDate</th>

                      <th>DueDate</th>

                      <th>Amount</th>

                      <th>Currency</th>

                      <th>Category</th>

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

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

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

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

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

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

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

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

                      <th>Email</th>

                      <th>Phone</th>

                      <th>Source</th>

                      <th>CurrentStage</th>
                    </tr>
                  </thead>
                  <tbody>
                    {organizations.candidates_organizations &&
                      Array.isArray(organizations.candidates_organizations) &&
                      organizations.candidates_organizations.map(
                        (item: any) => (
                          <tr
                            key={item.id}
                            onClick={() =>
                              router.push(
                                `/candidates/candidates-view/?id=${item.id}`,
                              )
                            }
                          >
                            <td data-label='name'>{item.name}</td>

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

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

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

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

          <>
            <p className={'block font-bold mb-2'}>Cards organizations</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>
                    {organizations.cards_organizations &&
                      Array.isArray(organizations.cards_organizations) &&
                      organizations.cards_organizations.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>
              {!organizations?.cards_organizations?.length && (
                <div className={'text-center py-4'}>No data</div>
              )}
            </CardBox>
          </>

          <>
            <p className={'block font-bold mb-2'}>
              Compensations organizations
            </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>
                    {organizations.compensations_organizations &&
                      Array.isArray(
                        organizations.compensations_organizations,
                      ) &&
                      organizations.compensations_organizations.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>
              {!organizations?.compensations_organizations?.length && (
                <div className={'text-center py-4'}>No data</div>
              )}
            </CardBox>
          </>

          <>
            <p className={'block font-bold mb-2'}>Deductions organizations</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>
                    {organizations.deductions_organizations &&
                      Array.isArray(organizations.deductions_organizations) &&
                      organizations.deductions_organizations.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>
              {!organizations?.deductions_organizations?.length && (
                <div className={'text-center py-4'}>No data</div>
              )}
            </CardBox>
          </>

          <>
            <p className={'block font-bold mb-2'}>Devices organizations</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>
                    {organizations.devices_organizations &&
                      Array.isArray(organizations.devices_organizations) &&
                      organizations.devices_organizations.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>
              {!organizations?.devices_organizations?.length && (
                <div className={'text-center py-4'}>No data</div>
              )}
            </CardBox>
          </>

          <>
            <p className={'block font-bold mb-2'}>Documents organizations</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>
                    {organizations.documents_organizations &&
                      Array.isArray(organizations.documents_organizations) &&
                      organizations.documents_organizations.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>
              {!organizations?.documents_organizations?.length && (
                <div className={'text-center py-4'}>No data</div>
              )}
            </CardBox>
          </>

          <>
            <p className={'block font-bold mb-2'}>Earnings organizations</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>
                    {organizations.earnings_organizations &&
                      Array.isArray(organizations.earnings_organizations) &&
                      organizations.earnings_organizations.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>
              {!organizations?.earnings_organizations?.length && (
                <div className={'text-center py-4'}>No data</div>
              )}
            </CardBox>
          </>

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

          <>
            <p className={'block font-bold mb-2'}>Employments organizations</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>
                    {organizations.employments_organizations &&
                      Array.isArray(organizations.employments_organizations) &&
                      organizations.employments_organizations.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>
              {!organizations?.employments_organizations?.length && (
                <div className={'text-center py-4'}>No data</div>
              )}
            </CardBox>
          </>

          <>
            <p className={'block font-bold mb-2'}>
              Enrollment_learnings organizations
            </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>
                    {organizations.enrollment_learnings_organizations &&
                      Array.isArray(
                        organizations.enrollment_learnings_organizations,
                      ) &&
                      organizations.enrollment_learnings_organizations.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>
              {!organizations?.enrollment_learnings_organizations?.length && (
                <div className={'text-center py-4'}>No data</div>
              )}
            </CardBox>
          </>

          <>
            <p className={'block font-bold mb-2'}>Enrollments organizations</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>
                    {organizations.enrollments_organizations &&
                      Array.isArray(organizations.enrollments_organizations) &&
                      organizations.enrollments_organizations.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>
              {!organizations?.enrollments_organizations?.length && (
                <div className={'text-center py-4'}>No data</div>
              )}
            </CardBox>
          </>

          <>
            <p className={'block font-bold mb-2'}>
              Expense_lines organizations
            </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>Merchant</th>

                      <th>Amount</th>

                      <th>Currency</th>

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

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

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

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

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

          <>
            <p className={'block font-bold mb-2'}>
              Expense_reports organizations
            </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>
                    {organizations.expense_reports_organizations &&
                      Array.isArray(
                        organizations.expense_reports_organizations,
                      ) &&
                      organizations.expense_reports_organizations.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>
              {!organizations?.expense_reports_organizations?.length && (
                <div className={'text-center py-4'}>No data</div>
              )}
            </CardBox>
          </>

          <>
            <p className={'block font-bold mb-2'}>Goals organizations</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>
                    {organizations.goals_organizations &&
                      Array.isArray(organizations.goals_organizations) &&
                      organizations.goals_organizations.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>
              {!organizations?.goals_organizations?.length && (
                <div className={'text-center py-4'}>No data</div>
              )}
            </CardBox>
          </>

          <>
            <p className={'block font-bold mb-2'}>
              Identity_accounts organizations
            </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>
                    {organizations.identity_accounts_organizations &&
                      Array.isArray(
                        organizations.identity_accounts_organizations,
                      ) &&
                      organizations.identity_accounts_organizations.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>
              {!organizations?.identity_accounts_organizations?.length && (
                <div className={'text-center py-4'}>No data</div>
              )}
            </CardBox>
          </>

          <>
            <p className={'block font-bold mb-2'}>Interviews organizations</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>
                    {organizations.interviews_organizations &&
                      Array.isArray(organizations.interviews_organizations) &&
                      organizations.interviews_organizations.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>
              {!organizations?.interviews_organizations?.length && (
                <div className={'text-center py-4'}>No data</div>
              )}
            </CardBox>
          </>

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

                      <th>Timestamp</th>

                      <th>Metadata</th>
                    </tr>
                  </thead>
                  <tbody>
                    {organizations.inventory_events_organizations &&
                      Array.isArray(
                        organizations.inventory_events_organizations,
                      ) &&
                      organizations.inventory_events_organizations.map(
                        (item: any) => (
                          <tr
                            key={item.id}
                            onClick={() =>
                              router.push(
                                `/inventory_events/inventory_events-view/?id=${item.id}`,
                              )
                            }
                          >
                            <td data-label='event_type'>{item.event_type}</td>

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

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

          <>
            <p className={'block font-bold mb-2'}>
              Job_requisitions organizations
            </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>
                    {organizations.job_requisitions_organizations &&
                      Array.isArray(
                        organizations.job_requisitions_organizations,
                      ) &&
                      organizations.job_requisitions_organizations.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>
              {!organizations?.job_requisitions_organizations?.length && (
                <div className={'text-center py-4'}>No data</div>
              )}
            </CardBox>
          </>

          <>
            <p className={'block font-bold mb-2'}>
              Learning_courses organizations
            </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>Provider</th>

                      <th>Hours</th>

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

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

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

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

          <>
            <p className={'block font-bold mb-2'}>
              Leave_requests organizations
            </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>
                    {organizations.leave_requests_organizations &&
                      Array.isArray(
                        organizations.leave_requests_organizations,
                      ) &&
                      organizations.leave_requests_organizations.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>
              {!organizations?.leave_requests_organizations?.length && (
                <div className={'text-center py-4'}>No data</div>
              )}
            </CardBox>
          </>

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

                      <th>TargetStartDate</th>

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

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

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

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

                      <th>PaidAt</th>

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

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

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

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

                      <th>PayPeriodStart</th>

                      <th>PayPeriodEnd</th>

                      <th>PayDate</th>

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

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

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

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

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

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

                      <th>RuleLogic</th>

                      <th>Effect</th>
                    </tr>
                  </thead>
                  <tbody>
                    {organizations.policies_organizations &&
                      Array.isArray(organizations.policies_organizations) &&
                      organizations.policies_organizations.map((item: any) => (
                        <tr
                          key={item.id}
                          onClick={() =>
                            router.push(
                              `/policies/policies-view/?id=${item.id}`,
                            )
                          }
                        >
                          <td data-label='scope'>{item.scope}</td>

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

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

          <>
            <p className={'block font-bold mb-2'}>Positions organizations</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>
                    {organizations.positions_organizations &&
                      Array.isArray(organizations.positions_organizations) &&
                      organizations.positions_organizations.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>
              {!organizations?.positions_organizations?.length && (
                <div className={'text-center py-4'}>No data</div>
              )}
            </CardBox>
          </>

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

                      <th>CycleStart</th>

                      <th>CycleEnd</th>

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

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

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

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

          <>
            <p className={'block font-bold mb-2'}>Reviews organizations</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>
                    {organizations.reviews_organizations &&
                      Array.isArray(organizations.reviews_organizations) &&
                      organizations.reviews_organizations.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>
              {!organizations?.reviews_organizations?.length && (
                <div className={'text-center py-4'}>No data</div>
              )}
            </CardBox>
          </>

          <>
            <p className={'block font-bold mb-2'}>
              Schedule_shifts organizations
            </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>
                    {organizations.schedule_shifts_organizations &&
                      Array.isArray(
                        organizations.schedule_shifts_organizations,
                      ) &&
                      organizations.schedule_shifts_organizations.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>
              {!organizations?.schedule_shifts_organizations?.length && (
                <div className={'text-center py-4'}>No data</div>
              )}
            </CardBox>
          </>

          <>
            <p className={'block font-bold mb-2'}>Taxes organizations</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>
                    {organizations.taxes_organizations &&
                      Array.isArray(organizations.taxes_organizations) &&
                      organizations.taxes_organizations.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>
              {!organizations?.taxes_organizations?.length && (
                <div className={'text-center py-4'}>No data</div>
              )}
            </CardBox>
          </>

          <>
            <p className={'block font-bold mb-2'}>Time_entries organizations</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>BreakMinutes</th>

                      <th>JobCode</th>
                    </tr>
                  </thead>
                  <tbody>
                    {organizations.time_entries_organizations &&
                      Array.isArray(organizations.time_entries_organizations) &&
                      organizations.time_entries_organizations.map(
                        (item: any) => (
                          <tr
                            key={item.id}
                            onClick={() =>
                              router.push(
                                `/time_entries/time_entries-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='break_minutes'>
                              {item.break_minutes}
                            </td>

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

          <>
            <p className={'block font-bold mb-2'}>Timecards organizations</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>
                    {organizations.timecards_organizations &&
                      Array.isArray(organizations.timecards_organizations) &&
                      organizations.timecards_organizations.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>
              {!organizations?.timecards_organizations?.length && (
                <div className={'text-center py-4'}>No data</div>
              )}
            </CardBox>
          </>

          <>
            <p className={'block font-bold mb-2'}>
              Travel_bookings organizations
            </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>
                    {organizations.travel_bookings_organizations &&
                      Array.isArray(
                        organizations.travel_bookings_organizations,
                      ) &&
                      organizations.travel_bookings_organizations.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>
              {!organizations?.travel_bookings_organizations?.length && (
                <div className={'text-center py-4'}>No data</div>
              )}
            </CardBox>
          </>

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

                      <th>TaxID</th>

                      <th>Country</th>

                      <th>Currency</th>
                    </tr>
                  </thead>
                  <tbody>
                    {organizations.vendors_organizations &&
                      Array.isArray(organizations.vendors_organizations) &&
                      organizations.vendors_organizations.map((item: any) => (
                        <tr
                          key={item.id}
                          onClick={() =>
                            router.push(`/vendors/vendors-view/?id=${item.id}`)
                          }
                        >
                          <td data-label='name'>{item.name}</td>

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

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

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

          <BaseDivider />

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

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

export default OrganizationsView;
