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

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

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

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

                      <th>Value</th>
                    </tr>
                  </thead>
                  <tbody>
                    {companies.assets_company &&
                      Array.isArray(companies.assets_company) &&
                      companies.assets_company.map((item: any) => (
                        <tr
                          key={item.id}
                          onClick={() =>
                            router.push(`/assets/assets-view/?id=${item.id}`)
                          }
                        >
                          <td data-label='asset_name'>{item.asset_name}</td>

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

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

                      <th>Value</th>
                    </tr>
                  </thead>
                  <tbody>
                    {companies.assets_companies &&
                      Array.isArray(companies.assets_companies) &&
                      companies.assets_companies.map((item: any) => (
                        <tr
                          key={item.id}
                          onClick={() =>
                            router.push(`/assets/assets-view/?id=${item.id}`)
                          }
                        >
                          <td data-label='asset_name'>{item.asset_name}</td>

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

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

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

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

                      <th>Amount</th>

                      <th>Date</th>
                    </tr>
                  </thead>
                  <tbody>
                    {companies.financial_records_company &&
                      Array.isArray(companies.financial_records_company) &&
                      companies.financial_records_company.map((item: any) => (
                        <tr
                          key={item.id}
                          onClick={() =>
                            router.push(
                              `/financial_records/financial_records-view/?id=${item.id}`,
                            )
                          }
                        >
                          <td data-label='record_type'>{item.record_type}</td>

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

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

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

                      <th>Amount</th>

                      <th>Date</th>
                    </tr>
                  </thead>
                  <tbody>
                    {companies.financial_records_companies &&
                      Array.isArray(companies.financial_records_companies) &&
                      companies.financial_records_companies.map((item: any) => (
                        <tr
                          key={item.id}
                          onClick={() =>
                            router.push(
                              `/financial_records/financial_records-view/?id=${item.id}`,
                            )
                          }
                        >
                          <td data-label='record_type'>{item.record_type}</td>

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

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

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

                      <th>Quantity</th>
                    </tr>
                  </thead>
                  <tbody>
                    {companies.inventories_company &&
                      Array.isArray(companies.inventories_company) &&
                      companies.inventories_company.map((item: any) => (
                        <tr
                          key={item.id}
                          onClick={() =>
                            router.push(
                              `/inventories/inventories-view/?id=${item.id}`,
                            )
                          }
                        >
                          <td data-label='item_name'>{item.item_name}</td>

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

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

                      <th>Quantity</th>
                    </tr>
                  </thead>
                  <tbody>
                    {companies.inventories_companies &&
                      Array.isArray(companies.inventories_companies) &&
                      companies.inventories_companies.map((item: any) => (
                        <tr
                          key={item.id}
                          onClick={() =>
                            router.push(
                              `/inventories/inventories-view/?id=${item.id}`,
                            )
                          }
                        >
                          <td data-label='item_name'>{item.item_name}</td>

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

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

                      <th>ScheduledDate</th>
                    </tr>
                  </thead>
                  <tbody>
                    {companies.manufacturing_orders_company &&
                      Array.isArray(companies.manufacturing_orders_company) &&
                      companies.manufacturing_orders_company.map(
                        (item: any) => (
                          <tr
                            key={item.id}
                            onClick={() =>
                              router.push(
                                `/manufacturing_orders/manufacturing_orders-view/?id=${item.id}`,
                              )
                            }
                          >
                            <td data-label='order_name'>{item.order_name}</td>

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

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

                      <th>ScheduledDate</th>
                    </tr>
                  </thead>
                  <tbody>
                    {companies.manufacturing_orders_companies &&
                      Array.isArray(companies.manufacturing_orders_companies) &&
                      companies.manufacturing_orders_companies.map(
                        (item: any) => (
                          <tr
                            key={item.id}
                            onClick={() =>
                              router.push(
                                `/manufacturing_orders/manufacturing_orders-view/?id=${item.id}`,
                              )
                            }
                          >
                            <td data-label='order_name'>{item.order_name}</td>

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

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

                      <th>ApprovalStatus</th>
                    </tr>
                  </thead>
                  <tbody>
                    {companies.procurements_company &&
                      Array.isArray(companies.procurements_company) &&
                      companies.procurements_company.map((item: any) => (
                        <tr
                          key={item.id}
                          onClick={() =>
                            router.push(
                              `/procurements/procurements-view/?id=${item.id}`,
                            )
                          }
                        >
                          <td data-label='request_name'>{item.request_name}</td>

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

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

                      <th>ApprovalStatus</th>
                    </tr>
                  </thead>
                  <tbody>
                    {companies.procurements_companies &&
                      Array.isArray(companies.procurements_companies) &&
                      companies.procurements_companies.map((item: any) => (
                        <tr
                          key={item.id}
                          onClick={() =>
                            router.push(
                              `/procurements/procurements-view/?id=${item.id}`,
                            )
                          }
                        >
                          <td data-label='request_name'>{item.request_name}</td>

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

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

                      <th>StartDate</th>

                      <th>EndDate</th>
                    </tr>
                  </thead>
                  <tbody>
                    {companies.projects_company &&
                      Array.isArray(companies.projects_company) &&
                      companies.projects_company.map((item: any) => (
                        <tr
                          key={item.id}
                          onClick={() =>
                            router.push(
                              `/projects/projects-view/?id=${item.id}`,
                            )
                          }
                        >
                          <td data-label='project_name'>{item.project_name}</td>

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

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

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

                      <th>StartDate</th>

                      <th>EndDate</th>
                    </tr>
                  </thead>
                  <tbody>
                    {companies.projects_companies &&
                      Array.isArray(companies.projects_companies) &&
                      companies.projects_companies.map((item: any) => (
                        <tr
                          key={item.id}
                          onClick={() =>
                            router.push(
                              `/projects/projects-view/?id=${item.id}`,
                            )
                          }
                        >
                          <td data-label='project_name'>{item.project_name}</td>

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

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

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

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

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

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

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

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

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

                      <th>RenewalDate</th>
                    </tr>
                  </thead>
                  <tbody>
                    {companies.subscriptions_company &&
                      Array.isArray(companies.subscriptions_company) &&
                      companies.subscriptions_company.map((item: any) => (
                        <tr
                          key={item.id}
                          onClick={() =>
                            router.push(
                              `/subscriptions/subscriptions-view/?id=${item.id}`,
                            )
                          }
                        >
                          <td data-label='subscription_name'>
                            {item.subscription_name}
                          </td>

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

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

                      <th>RenewalDate</th>
                    </tr>
                  </thead>
                  <tbody>
                    {companies.subscriptions_companies &&
                      Array.isArray(companies.subscriptions_companies) &&
                      companies.subscriptions_companies.map((item: any) => (
                        <tr
                          key={item.id}
                          onClick={() =>
                            router.push(
                              `/subscriptions/subscriptions-view/?id=${item.id}`,
                            )
                          }
                        >
                          <td data-label='subscription_name'>
                            {item.subscription_name}
                          </td>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

          <BaseDivider />

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

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

export default CompaniesView;
