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";


const CompaniesView = () => {
    const router = useRouter()
    const dispatch = useAppDispatch()
    const { companies } = useAppSelector((state) => state.companies)
    

    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>
              

              

              

              

              

              

              

              

              

              

              

              

              
              

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>ShortName</p>
                    <p>{companies?.short_name}</p>
                </div>
              

              

              

              

              

              

              

              

              

              

              

              

              
              

              

              

              

              

              

              

              

              

              

              

              

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>Logo</p>
                    {companies?.logo?.length
                      ? (
                        <ImageField
                          name={'logo'}
                          image={companies?.logo}
                          className='w-20 h-20'
                        />
                      ) : <p>No Logo</p>
                    }
                </div>
              

              
              

              

              

              

              

              

              

              

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>Status</p>
                    <p>{companies?.status ?? 'No data'}</p>
                </div>
              

              

              

              

              

              
              

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>LegalName</p>
                    <p>{companies?.legal_name}</p>
                </div>
              

              

              

              

              

              

              

              

              

              

              

              

              
              

              

              

              

              

              

              

              

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>LegalForm</p>
                    <p>{companies?.legal_form ?? 'No data'}</p>
                </div>
              

              

              

              

              

              
              

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>HandelsregisterNumber</p>
                    <p>{companies?.handelsregister_number}</p>
                </div>
              

              

              

              

              

              

              

              

              

              

              

              

              
              

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>RegisterCourt</p>
                    <p>{companies?.register_court}</p>
                </div>
              

              

              

              

              

              

              

              

              

              

              

              

              
              

              

              
                <FormField label='Multi Text' hasTextareaHeight>
                  <textarea className={'w-full'} disabled value={companies?.managing_directors} />
                </FormField>
              

              

              

              

              

              

              

              

              

              

              

              
              

              

              

              

              

              

              
                <FormField label='FoundingDate'>
                    {companies.founding_date ? <DatePicker
                      dateFormat="yyyy-MM-dd hh:mm"
                      showTimeSelect
                      selected={companies.founding_date ?
                        new Date(
                          dayjs(companies.founding_date).format('YYYY-MM-DD hh:mm'),
                        ) : null
                      }
                      disabled
                    /> : <p>No FoundingDate</p>}
                </FormField>
              

              

              

              

              

              

              

              
              

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>VATNumber</p>
                    <p>{companies?.vat_number}</p>
                </div>
              

              

              

              

              

              

              

              

              

              

              

              

              
              

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>TaxNumber</p>
                    <p>{companies?.tax_number}</p>
                </div>
              

              

              

              

              

              

              

              

              

              

              

              

              
              

              

              

              

              

              

              

              

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>VATStatus</p>
                    <p>{companies?.vat_status ?? 'No data'}</p>
                </div>
              

              

              

              

              

              
              

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>EORINumber</p>
                    <p>{companies?.eori_number}</p>
                </div>
              

              

              

              

              

              

              

              

              

              

              

              

              
              

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>GLNNumber</p>
                    <p>{companies?.gln_number}</p>
                </div>
              

              

              

              

              

              

              

              

              

              

              

              

              
              

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>SCAC</p>
                    <p>{companies?.scac}</p>
                </div>
              

              

              

              

              

              

              

              

              

              

              

              

              
              

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>AddressLine1</p>
                    <p>{companies?.address_line1}</p>
                </div>
              

              

              

              

              

              

              

              

              

              

              

              

              
              

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>AddressLine2</p>
                    <p>{companies?.address_line2}</p>
                </div>
              

              

              

              

              

              

              

              

              

              

              

              

              
              

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>PostalCode</p>
                    <p>{companies?.postal_code}</p>
                </div>
              

              

              

              

              

              

              

              

              

              

              

              

              
              

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>City</p>
                    <p>{companies?.city}</p>
                </div>
              

              

              

              

              

              

              

              

              

              

              

              

              
              

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>State</p>
                    <p>{companies?.state}</p>
                </div>
              

              

              

              

              

              

              

              

              

              

              

              

              
              

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>CountryCode</p>
                    <p>{companies?.country_code}</p>
                </div>
              

              

              

              

              

              

              

              

              

              

              

              

              
              

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>Email</p>
                    <p>{companies?.email}</p>
                </div>
              

              

              

              

              

              

              

              

              

              

              

              

              
              

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>Phone</p>
                    <p>{companies?.phone}</p>
                </div>
              

              

              

              

              

              

              

              

              

              

              

              

              
              

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>Website</p>
                    <p>{companies?.website}</p>
                </div>
              

              

              

              

              

              

              

              

              

              

              

              

              
              

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>DispatchEmail</p>
                    <p>{companies?.dispatch_email}</p>
                </div>
              

              

              

              

              

              

              

              

              

              

              

              

              
              

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>AccountingEmail</p>
                    <p>{companies?.accounting_email}</p>
                </div>
              

              

              

              

              

              

              

              

              

              

              

              

              
              

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>HREmail</p>
                    <p>{companies?.hr_email}</p>
                </div>
              

              

              

              

              

              

              

              

              

              

              

              

              
              

              

              

              

              

              

              

              

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>DefaultCurrency</p>
                    <p>{companies?.default_currency ?? 'No data'}</p>
                </div>
              

              

              

              

              

              
              

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>InvoicePrefix</p>
                    <p>{companies?.invoice_prefix}</p>
                </div>
              

              

              

              

              

              

              

              

              

              

              

              

              
              

              

              

              

              

              

              

              

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>InvoiceNumberingMode</p>
                    <p>{companies?.invoice_numbering_mode ?? 'No data'}</p>
                </div>
              

              

              

              

              

              
              

              

              

              

              
                <div className={'mb-4'}>
                  <p className={'block font-bold mb-2'}>InvoiceNextNumber</p>
                  <p>{companies?.invoice_next_number || 'No data'}</p>
                </div>
              

              

              

              

              

              

              

              

              

              
              

              

              

              

              

              

              

              

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>InvoiceRounding</p>
                    <p>{companies?.invoice_rounding ?? 'No data'}</p>
                </div>
              

              

              

              

              

              
              

              

              

              

              
                <div className={'mb-4'}>
                  <p className={'block font-bold mb-2'}>PaymentTerms(Days)</p>
                  <p>{companies?.payment_terms_days || 'No data'}</p>
                </div>
              

              

              

              

              

              

              

              

              

              
              

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>PayrollProvider</p>
                    <p>{companies?.payroll_provider}</p>
                </div>
              

              

              

              

              

              

              

              

              

              

              

              

              
              

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>PayrollContactEmail</p>
                    <p>{companies?.payroll_contact_email}</p>
                </div>
              

              

              

              

              

              

              

              

              

              

              

              

              
              

              

              
                <FormField label='Multi Text' hasTextareaHeight>
                  <textarea className={'w-full'} disabled value={companies?.notes} />
                </FormField>
              

              

              

              

              

              

              

              

              

              

              

              
              

                
                
                
                
                
                <>
                    <p className={'block font-bold mb-2'}>Company_locations Company</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>LocationType</th>
                                
                                
                                
                                <th>Name</th>
                                
                                
                                
                                <th>AddressLine1</th>
                                
                                
                                
                                <th>AddressLine2</th>
                                
                                
                                
                                <th>PostalCode</th>
                                
                                
                                
                                <th>City</th>
                                
                                
                                
                                <th>State</th>
                                
                                
                                
                                <th>CountryCode</th>
                                
                                
                                
                                <th>Phone</th>
                                
                                
                                
                                <th>Email</th>
                                
                                
                                
                                <th>Notes</th>
                                
                                
                                
                                <th>Active</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {companies.company_locations_company && Array.isArray(companies.company_locations_company) &&
                              companies.company_locations_company.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/company_locations/company_locations-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="type">
                                        { item.type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="name">
                                        { item.name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="address_line1">
                                        { item.address_line1 }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="address_line2">
                                        { item.address_line2 }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="postal_code">
                                        { item.postal_code }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="city">
                                        { item.city }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="state">
                                        { item.state }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="country_code">
                                        { item.country_code }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="phone">
                                        { item.phone }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="email">
                                        { item.email }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="notes">
                                        { item.notes }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="is_active">
                                        { dataFormatter.booleanFormatter(item.is_active) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!companies?.company_locations_company?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Company_contacts Company</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>Name</th>
                                
                                
                                
                                <th>Title</th>
                                
                                
                                
                                <th>Email</th>
                                
                                
                                
                                <th>Phone</th>
                                
                                
                                
                                <th>Mobile</th>
                                
                                
                                
                                <th>Notes</th>
                                
                                
                                
                                <th>Active</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {companies.company_contacts_company && Array.isArray(companies.company_contacts_company) &&
                              companies.company_contacts_company.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/company_contacts/company_contacts-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="role">
                                        { item.role }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="name">
                                        { item.name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="title">
                                        { item.title }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="email">
                                        { item.email }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="phone">
                                        { item.phone }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="mobile">
                                        { item.mobile }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="notes">
                                        { item.notes }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="is_active">
                                        { dataFormatter.booleanFormatter(item.is_active) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!companies?.company_contacts_company?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Company_bank_accounts Company</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>AccountType</th>
                                
                                
                                
                                <th>Currency</th>
                                
                                
                                
                                <th>BankName</th>
                                
                                
                                
                                <th>IBAN</th>
                                
                                
                                
                                <th>BIC</th>
                                
                                
                                
                                <th>AccountHolder</th>
                                
                                
                                
                                <th>Default</th>
                                
                                
                                
                                <th>Active</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {companies.company_bank_accounts_company && Array.isArray(companies.company_bank_accounts_company) &&
                              companies.company_bank_accounts_company.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/company_bank_accounts/company_bank_accounts-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="type">
                                        { item.type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="currency">
                                        { item.currency }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="bank_name">
                                        { item.bank_name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="iban">
                                        { item.iban }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="bic">
                                        { item.bic }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="account_holder">
                                        { item.account_holder }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="is_default">
                                        { dataFormatter.booleanFormatter(item.is_default) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="is_active">
                                        { dataFormatter.booleanFormatter(item.is_active) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!companies?.company_bank_accounts_company?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Company_permits Company</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>PermitType</th>
                                
                                
                                
                                <th>Number</th>
                                
                                
                                
                                <th>Issuer</th>
                                
                                
                                
                                <th>CountryCode</th>
                                
                                
                                
                                <th>IssuedAt</th>
                                
                                
                                
                                <th>ValidFrom</th>
                                
                                
                                
                                <th>ExpiresAt</th>
                                
                                
                                
                                <th>Notes</th>
                                
                                
                                
                                <th>Active</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {companies.company_permits_company && Array.isArray(companies.company_permits_company) &&
                              companies.company_permits_company.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/company_permits/company_permits-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="type">
                                        { item.type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="number">
                                        { item.number }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="issuer">
                                        { item.issuer }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="country_code">
                                        { item.country_code }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="issued_at">
                                        { dataFormatter.dateTimeFormatter(item.issued_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="valid_from">
                                        { dataFormatter.dateTimeFormatter(item.valid_from) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="expires_at">
                                        { dataFormatter.dateTimeFormatter(item.expires_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="notes">
                                        { item.notes }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="is_active">
                                        { dataFormatter.booleanFormatter(item.is_active) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!companies?.company_permits_company?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Company_insurances Company</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>InsuranceType</th>
                                
                                
                                
                                <th>Provider</th>
                                
                                
                                
                                <th>PolicyNumber</th>
                                
                                
                                
                                <th>Broker</th>
                                
                                
                                
                                <th>CoverageAmount</th>
                                
                                
                                
                                <th>Currency</th>
                                
                                
                                
                                <th>ValidFrom</th>
                                
                                
                                
                                <th>ExpiresAt</th>
                                
                                
                                
                                <th>ContactName</th>
                                
                                
                                
                                <th>ContactEmail</th>
                                
                                
                                
                                <th>ContactPhone</th>
                                
                                
                                
                                <th>Notes</th>
                                
                                
                                
                                <th>Active</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {companies.company_insurances_company && Array.isArray(companies.company_insurances_company) &&
                              companies.company_insurances_company.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/company_insurances/company_insurances-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="type">
                                        { item.type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="provider">
                                        { item.provider }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="policy_number">
                                        { item.policy_number }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="broker">
                                        { item.broker }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="coverage_amount">
                                        { item.coverage_amount }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="currency">
                                        { item.currency }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="valid_from">
                                        { dataFormatter.dateTimeFormatter(item.valid_from) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="expires_at">
                                        { dataFormatter.dateTimeFormatter(item.expires_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="contact_name">
                                        { item.contact_name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="contact_email">
                                        { item.contact_email }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="contact_phone">
                                        { item.contact_phone }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="notes">
                                        { item.notes }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="is_active">
                                        { dataFormatter.booleanFormatter(item.is_active) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!companies?.company_insurances_company?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Company_documents Company</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>Title</th>
                                
                                
                                
                                <th>Notes</th>
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {companies.company_documents_company && Array.isArray(companies.company_documents_company) &&
                              companies.company_documents_company.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/company_documents/company_documents-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="type">
                                        { item.type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="title">
                                        { item.title }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="notes">
                                        { item.notes }
                                    </td>
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!companies?.company_documents_company?.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>FirstName</th>
                                
                                
                                
                                <th>MiddleName</th>
                                
                                
                                
                                <th>LastName</th>
                                
                                
                                
                                <th>NationalID</th>
                                
                                
                                
                                <th>BirthDate</th>
                                
                                
                                
                                <th>Nationality</th>
                                
                                
                                
                                <th>Email</th>
                                
                                
                                
                                <th>Phone</th>
                                
                                
                                
                                <th>Phone2</th>
                                
                                
                                
                                <th>PermanentAddress</th>
                                
                                
                                
                                <th>CurrentAddress</th>
                                
                                
                                
                                <th>EmergencyContact</th>
                                
                                
                                
                                <th>EmergencyPhone</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                <th>Notes</th>
                                
                                
                                
                                <th>IsDriver</th>
                                
                                
                                
                                <th>IsDispatcher</th>
                                
                                
                                
                                <th>IsAccounting</th>
                                
                                
                                
                                <th>DeletedAt</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="first_name">
                                        { item.first_name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="middle_name">
                                        { item.middle_name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="last_name">
                                        { item.last_name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="national_id">
                                        { item.national_id }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="birth_date">
                                        { dataFormatter.dateTimeFormatter(item.birth_date) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="nationality">
                                        { item.nationality }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="email">
                                        { item.email }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="phone">
                                        { item.phone }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="phone2">
                                        { item.phone2 }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="permanent_address">
                                        { item.permanent_address }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="current_address">
                                        { item.current_address }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="emergency_contact">
                                        { item.emergency_contact }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="emergency_phone">
                                        { item.emergency_phone }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="notes">
                                        { item.notes }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="is_driver">
                                        { dataFormatter.booleanFormatter(item.is_driver) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="is_dispatcher">
                                        { dataFormatter.booleanFormatter(item.is_dispatcher) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="is_accounting">
                                        { dataFormatter.booleanFormatter(item.is_accounting) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="deleted_at">
                                        { dataFormatter.dateTimeFormatter(item.deleted_at) }
                                    </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'}>Incidents Company</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                
                                
                                <th>IncidentType</th>
                                
                                
                                
                                <th>OccurredAt</th>
                                
                                
                                
                                <th>Amount</th>
                                
                                
                                
                                <th>Currency</th>
                                
                                
                                
                                <th>Description</th>
                                
                                
                                
                                <th>Location</th>
                                
                                
                                
                                <th>Paid</th>
                                
                                
                                
                                <th>PaidAt</th>
                                
                                
                                
                                <th>Points</th>
                                
                                
                                
                                <th>Severity</th>
                                
                                
                                
                                <th>ReportedBy</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {companies.incidents_company && Array.isArray(companies.incidents_company) &&
                              companies.incidents_company.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/incidents/incidents-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="type">
                                        { item.type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="occurred_at">
                                        { dataFormatter.dateTimeFormatter(item.occurred_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="amount">
                                        { item.amount }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="currency">
                                        { item.currency }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="description">
                                        { item.description }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="location">
                                        { item.location }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="paid">
                                        { dataFormatter.booleanFormatter(item.paid) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="paid_at">
                                        { dataFormatter.dateTimeFormatter(item.paid_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="points">
                                        { item.points }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="severity">
                                        { item.severity }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="reported_by">
                                        { item.reported_by }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!companies?.incidents_company?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Documents Company</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>Scope</th>
                                
                                
                                
                                <th>Title</th>
                                
                                
                                
                                <th>Notes</th>
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {companies.documents_company && Array.isArray(companies.documents_company) &&
                              companies.documents_company.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/documents/documents-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="type">
                                        { item.type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="scope">
                                        { item.scope }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="title">
                                        { item.title }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="notes">
                                        { item.notes }
                                    </td>
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!companies?.documents_company?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                
                <>
                    <p className={'block font-bold mb-2'}>Document_retention_policies Company</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>KeepMinimumVersions</th>
                                
                                
                                
                                <th>KeepFilesDays</th>
                                
                                
                                
                                <th>KeepVersionDays</th>
                                
                                
                                
                                <th>KeepAuditAfterFileRemoval</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {companies.document_retention_policies_company && Array.isArray(companies.document_retention_policies_company) &&
                              companies.document_retention_policies_company.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/document_retention_policies/document_retention_policies-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="type">
                                        { item.type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="keep_min_versions">
                                        { item.keep_min_versions }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="keep_files_days">
                                        { item.keep_files_days }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="keep_version_days">
                                        { item.keep_version_days }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="keep_audit_after_file_removal">
                                        { dataFormatter.booleanFormatter(item.keep_audit_after_file_removal) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!companies?.document_retention_policies_company?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Customers Company</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>LegalName</th>
                                
                                
                                
                                <th>TaxNumber</th>
                                
                                
                                
                                <th>VATNumber</th>
                                
                                
                                
                                <th>EORINumber</th>
                                
                                
                                
                                <th>Email</th>
                                
                                
                                
                                <th>Phone</th>
                                
                                
                                
                                <th>Phone2</th>
                                
                                
                                
                                <th>Website</th>
                                
                                
                                
                                <th>AddressLine1</th>
                                
                                
                                
                                <th>AddressLine2</th>
                                
                                
                                
                                <th>PostalCode</th>
                                
                                
                                
                                <th>City</th>
                                
                                
                                
                                <th>CountryCode</th>
                                
                                
                                
                                <th>PaymentTerms(Days)</th>
                                
                                
                                
                                <th>Currency</th>
                                
                                
                                
                                <th>CreditLimit(EUR)</th>
                                
                                
                                
                                <th>ContactPerson</th>
                                
                                
                                
                                <th>ContactEmail</th>
                                
                                
                                
                                <th>ContactPhone</th>
                                
                                
                                
                                <th>Notes</th>
                                
                                
                                
                                <th>Active</th>
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {companies.customers_company && Array.isArray(companies.customers_company) &&
                              companies.customers_company.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/customers/customers-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="name">
                                        { item.name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="legal_name">
                                        { item.legal_name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="tax_number">
                                        { item.tax_number }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="vat_number">
                                        { item.vat_number }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="eori_number">
                                        { item.eori_number }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="email">
                                        { item.email }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="phone">
                                        { item.phone }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="phone2">
                                        { item.phone2 }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="website">
                                        { item.website }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="address_line1">
                                        { item.address_line1 }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="address_line2">
                                        { item.address_line2 }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="postal_code">
                                        { item.postal_code }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="city">
                                        { item.city }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="country_code">
                                        { item.country_code }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="payment_terms_days">
                                        { item.payment_terms_days }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="currency">
                                        { item.currency }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="credit_limit_eur">
                                        { item.credit_limit_eur }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="contact_person">
                                        { item.contact_person }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="contact_email">
                                        { item.contact_email }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="contact_phone">
                                        { item.contact_phone }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="notes">
                                        { item.notes }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="is_active">
                                        { dataFormatter.booleanFormatter(item.is_active) }
                                    </td>
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!companies?.customers_company?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Vendors Company</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>VendorType</th>
                                
                                
                                
                                <th>Name</th>
                                
                                
                                
                                <th>LegalName</th>
                                
                                
                                
                                <th>TaxNumber</th>
                                
                                
                                
                                <th>VATNumber</th>
                                
                                
                                
                                <th>IBAN</th>
                                
                                
                                
                                <th>BankName</th>
                                
                                
                                
                                <th>Email</th>
                                
                                
                                
                                <th>Phone</th>
                                
                                
                                
                                <th>Phone2</th>
                                
                                
                                
                                <th>Website</th>
                                
                                
                                
                                <th>AddressLine1</th>
                                
                                
                                
                                <th>AddressLine2</th>
                                
                                
                                
                                <th>PostalCode</th>
                                
                                
                                
                                <th>City</th>
                                
                                
                                
                                <th>CountryCode</th>
                                
                                
                                
                                <th>ContactPerson</th>
                                
                                
                                
                                <th>ContactEmail</th>
                                
                                
                                
                                <th>ContactPhone</th>
                                
                                
                                
                                <th>ContractNumber</th>
                                
                                
                                
                                <th>ContractValidTo</th>
                                
                                
                                
                                
                                
                                <th>Notes</th>
                                
                                
                                
                                <th>Active</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {companies.vendors_company && Array.isArray(companies.vendors_company) &&
                              companies.vendors_company.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/vendors/vendors-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="type">
                                        { item.type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="name">
                                        { item.name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="legal_name">
                                        { item.legal_name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="tax_number">
                                        { item.tax_number }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="vat_number">
                                        { item.vat_number }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="iban">
                                        { item.iban }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="bank_name">
                                        { item.bank_name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="email">
                                        { item.email }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="phone">
                                        { item.phone }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="phone2">
                                        { item.phone2 }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="website">
                                        { item.website }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="address_line1">
                                        { item.address_line1 }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="address_line2">
                                        { item.address_line2 }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="postal_code">
                                        { item.postal_code }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="city">
                                        { item.city }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="country_code">
                                        { item.country_code }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="contact_person">
                                        { item.contact_person }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="contact_email">
                                        { item.contact_email }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="contact_phone">
                                        { item.contact_phone }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="contract_number">
                                        { item.contract_number }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="contract_valid_to">
                                        { dataFormatter.dateTimeFormatter(item.contract_valid_to) }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="notes">
                                        { item.notes }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="is_active">
                                        { dataFormatter.booleanFormatter(item.is_active) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!companies?.vendors_company?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Vehicles Company</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>VehicleType</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                <th>Ownership</th>
                                
                                
                                
                                <th>PlateNumber</th>
                                
                                
                                
                                <th>VIN</th>
                                
                                
                                
                                <th>Brand</th>
                                
                                
                                
                                <th>Model</th>
                                
                                
                                
                                <th>Variant</th>
                                
                                
                                
                                <th>Year</th>
                                
                                
                                
                                <th>FirstRegistrationAt</th>
                                
                                
                                
                                <th>FuelType</th>
                                
                                
                                
                                <th>EmissionClass</th>
                                
                                
                                
                                <th>GrossWeight(kg)</th>
                                
                                
                                
                                <th>CurbWeight(kg)</th>
                                
                                
                                
                                <th>Payload(kg)</th>
                                
                                
                                
                                <th>AxleCount</th>
                                
                                
                                
                                <th>HasLiftgate</th>
                                
                                
                                
                                <th>TachographType</th>
                                
                                
                                
                                <th>TachographSerial</th>
                                
                                
                                
                                <th>TachographLastCalibrationAt</th>
                                
                                
                                
                                <th>TachographNextCalibrationAt</th>
                                
                                
                                
                                <th>TollProvider</th>
                                
                                
                                
                                <th>TollOBUSerial</th>
                                
                                
                                
                                <th>TollContractNo</th>
                                
                                
                                
                                <th>InsuranceNotes</th>
                                
                                
                                
                                <th>Notes</th>
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {companies.vehicles_company && Array.isArray(companies.vehicles_company) &&
                              companies.vehicles_company.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/vehicles/vehicles-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="type">
                                        { item.type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="ownership">
                                        { item.ownership }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="plate_number">
                                        { item.plate_number }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="vin">
                                        { item.vin }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="brand">
                                        { item.brand }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="model">
                                        { item.model }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="variant">
                                        { item.variant }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="year">
                                        { item.year }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="first_registration_at">
                                        { dataFormatter.dateTimeFormatter(item.first_registration_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="fuel_type">
                                        { item.fuel_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="emission_class">
                                        { item.emission_class }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="gross_weight_kg">
                                        { item.gross_weight_kg }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="curb_weight_kg">
                                        { item.curb_weight_kg }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="payload_kg">
                                        { item.payload_kg }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="axle_count">
                                        { item.axle_count }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="has_liftgate">
                                        { dataFormatter.booleanFormatter(item.has_liftgate) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="tachograph_type">
                                        { item.tachograph_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="tachograph_serial">
                                        { item.tachograph_serial }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="tachograph_last_calibration_at">
                                        { dataFormatter.dateTimeFormatter(item.tachograph_last_calibration_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="tachograph_next_calibration_at">
                                        { dataFormatter.dateTimeFormatter(item.tachograph_next_calibration_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="toll_provider">
                                        { item.toll_provider }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="toll_obu_serial">
                                        { item.toll_obu_serial }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="toll_contract_no">
                                        { item.toll_contract_no }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="insurance_notes">
                                        { item.insurance_notes }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="notes">
                                        { item.notes }
                                    </td>
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!companies?.vehicles_company?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Trailers Company</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>TrailerType</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                <th>Ownership</th>
                                
                                
                                
                                <th>PlateNumber</th>
                                
                                
                                
                                <th>VIN</th>
                                
                                
                                
                                <th>Brand</th>
                                
                                
                                
                                <th>Model</th>
                                
                                
                                
                                <th>Year</th>
                                
                                
                                
                                <th>FirstRegistrationAt</th>
                                
                                
                                
                                <th>GrossWeight(kg)</th>
                                
                                
                                
                                <th>CurbWeight(kg)</th>
                                
                                
                                
                                <th>Payload(kg)</th>
                                
                                
                                
                                <th>AxleCount</th>
                                
                                
                                
                                <th>HasLiftgate</th>
                                
                                
                                
                                <th>Notes</th>
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {companies.trailers_company && Array.isArray(companies.trailers_company) &&
                              companies.trailers_company.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/trailers/trailers-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="type">
                                        { item.type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="ownership">
                                        { item.ownership }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="plate_number">
                                        { item.plate_number }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="vin">
                                        { item.vin }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="brand">
                                        { item.brand }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="model">
                                        { item.model }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="year">
                                        { item.year }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="first_registration_at">
                                        { dataFormatter.dateTimeFormatter(item.first_registration_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="gross_weight_kg">
                                        { item.gross_weight_kg }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="curb_weight_kg">
                                        { item.curb_weight_kg }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="payload_kg">
                                        { item.payload_kg }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="axle_count">
                                        { item.axle_count }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="has_liftgate">
                                        { dataFormatter.booleanFormatter(item.has_liftgate) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="notes">
                                        { item.notes }
                                    </td>
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!companies?.trailers_company?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Vehicle_trailer_links Company</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                
                                
                                <th>LinkedFrom</th>
                                
                                
                                
                                <th>LinkedTo</th>
                                
                                
                                
                                <th>Notes</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {companies.vehicle_trailer_links_company && Array.isArray(companies.vehicle_trailer_links_company) &&
                              companies.vehicle_trailer_links_company.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/vehicle_trailer_links/vehicle_trailer_links-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="linked_from">
                                        { dataFormatter.dateTimeFormatter(item.linked_from) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="linked_to">
                                        { dataFormatter.dateTimeFormatter(item.linked_to) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="notes">
                                        { item.notes }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!companies?.vehicle_trailer_links_company?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Vehicle_inspections Company</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                
                                
                                <th>InspectionType</th>
                                
                                
                                
                                <th>Issuer</th>
                                
                                
                                
                                <th>ReportNo</th>
                                
                                
                                
                                <th>PerformedAt</th>
                                
                                
                                
                                <th>ExpiresAt</th>
                                
                                
                                
                                <th>Passed</th>
                                
                                
                                
                                <th>Odometer(km)</th>
                                
                                
                                
                                <th>Notes</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {companies.vehicle_inspections_company && Array.isArray(companies.vehicle_inspections_company) &&
                              companies.vehicle_inspections_company.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/vehicle_inspections/vehicle_inspections-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="type">
                                        { item.type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="issuer">
                                        { item.issuer }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="report_no">
                                        { item.report_no }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="performed_at">
                                        { dataFormatter.dateTimeFormatter(item.performed_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="expires_at">
                                        { dataFormatter.dateTimeFormatter(item.expires_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="passed">
                                        { dataFormatter.booleanFormatter(item.passed) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="odometer_km">
                                        { item.odometer_km }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="notes">
                                        { item.notes }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!companies?.vehicle_inspections_company?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Vehicle_maintenances Company</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                
                                
                                <th>MaintenanceType</th>
                                
                                
                                
                                <th>Title</th>
                                
                                
                                
                                <th>WorkshopName</th>
                                
                                
                                
                                <th>WorkshopContact</th>
                                
                                
                                
                                <th>StartedAt</th>
                                
                                
                                
                                <th>FinishedAt</th>
                                
                                
                                
                                <th>Odometer(km)</th>
                                
                                
                                
                                <th>CostAmount</th>
                                
                                
                                
                                <th>Currency</th>
                                
                                
                                
                                <th>Notes</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {companies.vehicle_maintenances_company && Array.isArray(companies.vehicle_maintenances_company) &&
                              companies.vehicle_maintenances_company.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/vehicle_maintenances/vehicle_maintenances-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="type">
                                        { item.type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="title">
                                        { item.title }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="workshop_name">
                                        { item.workshop_name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="workshop_contact">
                                        { item.workshop_contact }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="started_at">
                                        { dataFormatter.dateTimeFormatter(item.started_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="finished_at">
                                        { dataFormatter.dateTimeFormatter(item.finished_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="odometer_km">
                                        { item.odometer_km }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="cost_amount">
                                        { item.cost_amount }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="currency">
                                        { item.currency }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="notes">
                                        { item.notes }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!companies?.vehicle_maintenances_company?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Vehicle_insurances Company</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                
                                
                                <th>InsuranceType</th>
                                
                                
                                
                                <th>Provider</th>
                                
                                
                                
                                <th>PolicyNumber</th>
                                
                                
                                
                                <th>Broker</th>
                                
                                
                                
                                <th>CoverageAmount</th>
                                
                                
                                
                                <th>Currency</th>
                                
                                
                                
                                <th>ValidFrom</th>
                                
                                
                                
                                <th>ExpiresAt</th>
                                
                                
                                
                                <th>Notes</th>
                                
                                
                                
                                <th>Active</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {companies.vehicle_insurances_company && Array.isArray(companies.vehicle_insurances_company) &&
                              companies.vehicle_insurances_company.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/vehicle_insurances/vehicle_insurances-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="type">
                                        { item.type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="provider">
                                        { item.provider }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="policy_number">
                                        { item.policy_number }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="broker">
                                        { item.broker }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="coverage_amount">
                                        { item.coverage_amount }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="currency">
                                        { item.currency }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="valid_from">
                                        { dataFormatter.dateTimeFormatter(item.valid_from) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="expires_at">
                                        { dataFormatter.dateTimeFormatter(item.expires_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="notes">
                                        { item.notes }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="is_active">
                                        { dataFormatter.booleanFormatter(item.is_active) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!companies?.vehicle_insurances_company?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Vehicle_documents Company</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>Title</th>
                                
                                
                                
                                <th>Notes</th>
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {companies.vehicle_documents_company && Array.isArray(companies.vehicle_documents_company) &&
                              companies.vehicle_documents_company.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/vehicle_documents/vehicle_documents-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="type">
                                        { item.type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="title">
                                        { item.title }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="notes">
                                        { item.notes }
                                    </td>
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!companies?.vehicle_documents_company?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                
                <>
                    <p className={'block font-bold mb-2'}>Driver_vehicle_assignments Company</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                
                                
                                <th>AssignedFrom</th>
                                
                                
                                
                                <th>AssignedTo</th>
                                
                                
                                
                                <th>Notes</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {companies.driver_vehicle_assignments_company && Array.isArray(companies.driver_vehicle_assignments_company) &&
                              companies.driver_vehicle_assignments_company.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/driver_vehicle_assignments/driver_vehicle_assignments-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="assigned_from">
                                        { dataFormatter.dateTimeFormatter(item.assigned_from) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="assigned_to">
                                        { dataFormatter.dateTimeFormatter(item.assigned_to) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="notes">
                                        { item.notes }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!companies?.driver_vehicle_assignments_company?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Orders Company</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>OrderNo</th>
                                
                                
                                
                                <th>Reference</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                <th>Title</th>
                                
                                
                                
                                <th>Notes</th>
                                
                                
                                
                                <th>Currency</th>
                                
                                
                                
                                <th>AgreedPrice</th>
                                
                                
                                
                                <th>PaymentTerms(Days)</th>
                                
                                
                                
                                <th>PlannedStartAt</th>
                                
                                
                                
                                <th>PlannedEndAt</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {companies.orders_company && Array.isArray(companies.orders_company) &&
                              companies.orders_company.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/orders/orders-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="order_no">
                                        { item.order_no }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="reference">
                                        { item.reference }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="title">
                                        { item.title }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="notes">
                                        { item.notes }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="currency">
                                        { item.currency }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="agreed_price">
                                        { item.agreed_price }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="payment_terms_days">
                                        { item.payment_terms_days }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="planned_start_at">
                                        { dataFormatter.dateTimeFormatter(item.planned_start_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="planned_end_at">
                                        { dataFormatter.dateTimeFormatter(item.planned_end_at) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!companies?.orders_company?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Loads Company</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                <th>LoadNo</th>
                                
                                
                                
                                <th>Reference</th>
                                
                                
                                
                                <th>EquipmentRequirement</th>
                                
                                
                                
                                <th>CargoDescription</th>
                                
                                
                                
                                <th>Weight(kg)</th>
                                
                                
                                
                                <th>Volume(m³)</th>
                                
                                
                                
                                <th>Pallets</th>
                                
                                
                                
                                <th>Pieces</th>
                                
                                
                                
                                <th>TemperatureMin(°C)</th>
                                
                                
                                
                                <th>TemperatureMax(°C)</th>
                                
                                
                                
                                <th>ADRRequired</th>
                                
                                
                                
                                <th>CMRNumber</th>
                                
                                
                                
                                <th>Notes</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {companies.loads_company && Array.isArray(companies.loads_company) &&
                              companies.loads_company.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/loads/loads-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="load_no">
                                        { item.load_no }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="reference">
                                        { item.reference }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="equipment">
                                        { item.equipment }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="cargo_description">
                                        { item.cargo_description }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="weight_kg">
                                        { item.weight_kg }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="volume_m3">
                                        { item.volume_m3 }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="pallets">
                                        { item.pallets }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="pieces">
                                        { item.pieces }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="temperature_min_c">
                                        { item.temperature_min_c }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="temperature_max_c">
                                        { item.temperature_max_c }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="adr_required">
                                        { dataFormatter.booleanFormatter(item.adr_required) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="cmr_number">
                                        { item.cmr_number }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="notes">
                                        { item.notes }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!companies?.loads_company?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Load_stops Company</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>StopType</th>
                                
                                
                                
                                <th>StopStatus</th>
                                
                                
                                
                                <th>Sequence</th>
                                
                                
                                
                                <th>Name</th>
                                
                                
                                
                                <th>AddressLine1</th>
                                
                                
                                
                                <th>AddressLine2</th>
                                
                                
                                
                                <th>PostalCode</th>
                                
                                
                                
                                <th>City</th>
                                
                                
                                
                                <th>State</th>
                                
                                
                                
                                <th>CountryCode</th>
                                
                                
                                
                                <th>WindowStartAt</th>
                                
                                
                                
                                <th>WindowEndAt</th>
                                
                                
                                
                                <th>PlannedAt</th>
                                
                                
                                
                                <th>ArrivedAt</th>
                                
                                
                                
                                <th>DepartedAt</th>
                                
                                
                                
                                <th>ContactName</th>
                                
                                
                                
                                <th>ContactPhone</th>
                                
                                
                                
                                <th>ContactEmail</th>
                                
                                
                                
                                <th>Instructions</th>
                                
                                
                                
                                <th>ReferenceNo</th>
                                
                                
                                
                                <th>Notes</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {companies.load_stops_company && Array.isArray(companies.load_stops_company) &&
                              companies.load_stops_company.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/load_stops/load_stops-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="type">
                                        { item.type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="sequence">
                                        { item.sequence }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="name">
                                        { item.name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="address_line1">
                                        { item.address_line1 }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="address_line2">
                                        { item.address_line2 }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="postal_code">
                                        { item.postal_code }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="city">
                                        { item.city }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="state">
                                        { item.state }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="country_code">
                                        { item.country_code }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="window_start_at">
                                        { dataFormatter.dateTimeFormatter(item.window_start_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="window_end_at">
                                        { dataFormatter.dateTimeFormatter(item.window_end_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="planned_at">
                                        { dataFormatter.dateTimeFormatter(item.planned_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="arrived_at">
                                        { dataFormatter.dateTimeFormatter(item.arrived_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="departed_at">
                                        { dataFormatter.dateTimeFormatter(item.departed_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="contact_name">
                                        { item.contact_name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="contact_phone">
                                        { item.contact_phone }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="contact_email">
                                        { item.contact_email }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="instructions">
                                        { item.instructions }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="reference_no">
                                        { item.reference_no }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="notes">
                                        { item.notes }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!companies?.load_stops_company?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Trips Company</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>TripNo</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                <th>PlannedStartAt</th>
                                
                                
                                
                                <th>PlannedEndAt</th>
                                
                                
                                
                                <th>StartedAt</th>
                                
                                
                                
                                <th>FinishedAt</th>
                                
                                
                                
                                <th>StartOdometer(km)</th>
                                
                                
                                
                                <th>EndOdometer(km)</th>
                                
                                
                                
                                <th>Distance(km)</th>
                                
                                
                                
                                <th>Notes</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {companies.trips_company && Array.isArray(companies.trips_company) &&
                              companies.trips_company.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/trips/trips-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="trip_no">
                                        { item.trip_no }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="planned_start_at">
                                        { dataFormatter.dateTimeFormatter(item.planned_start_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="planned_end_at">
                                        { dataFormatter.dateTimeFormatter(item.planned_end_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="started_at">
                                        { dataFormatter.dateTimeFormatter(item.started_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="finished_at">
                                        { dataFormatter.dateTimeFormatter(item.finished_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="start_odometer_km">
                                        { item.start_odometer_km }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="end_odometer_km">
                                        { item.end_odometer_km }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="distance_km">
                                        { item.distance_km }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="notes">
                                        { item.notes }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!companies?.trips_company?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                
                <>
                    <p className={'block font-bold mb-2'}>Pod_files Company</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>PODType</th>
                                
                                
                                
                                <th>StorageProvider</th>
                                
                                
                                
                                <th>FileKey</th>
                                
                                
                                
                                <th>FileName</th>
                                
                                
                                
                                <th>MIMEType</th>
                                
                                
                                
                                <th>Size(bytes)</th>
                                
                                
                                
                                <th>FileURL</th>
                                
                                
                                
                                <th>ChecksumSHA-256</th>
                                
                                
                                
                                <th>UploadedAt</th>
                                
                                
                                
                                <th>UploadedBy</th>
                                
                                
                                
                                <th>Notes</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {companies.pod_files_company && Array.isArray(companies.pod_files_company) &&
                              companies.pod_files_company.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/pod_files/pod_files-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="type">
                                        { item.type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="provider">
                                        { item.provider }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="file_key">
                                        { item.file_key }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="file_name">
                                        { item.file_name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="mime_type">
                                        { item.mime_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="size_bytes">
                                        { item.size_bytes }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="file_url">
                                        { item.file_url }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="checksum_sha256">
                                        { item.checksum_sha256 }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="uploaded_at">
                                        { dataFormatter.dateTimeFormatter(item.uploaded_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="uploaded_by">
                                        { item.uploaded_by }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="notes">
                                        { item.notes }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!companies?.pod_files_company?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Invoices Company</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                <th>InvoiceNo</th>
                                
                                
                                
                                <th>IssuedAt</th>
                                
                                
                                
                                <th>DueAt</th>
                                
                                
                                
                                <th>Currency</th>
                                
                                
                                
                                <th>Subtotal</th>
                                
                                
                                
                                <th>VATRate</th>
                                
                                
                                
                                <th>VATAmount</th>
                                
                                
                                
                                <th>Total</th>
                                
                                
                                
                                <th>Notes</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {companies.invoices_company && Array.isArray(companies.invoices_company) &&
                              companies.invoices_company.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/invoices/invoices-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="invoice_no">
                                        { item.invoice_no }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="issued_at">
                                        { dataFormatter.dateTimeFormatter(item.issued_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="due_at">
                                        { dataFormatter.dateTimeFormatter(item.due_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="currency">
                                        { item.currency }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="subtotal">
                                        { item.subtotal }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="vat_rate">
                                        { item.vat_rate }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="vat_amount">
                                        { item.vat_amount }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="total">
                                        { item.total }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="notes">
                                        { item.notes }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!companies?.invoices_company?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                
                <>
                    <p className={'block font-bold mb-2'}>Payments Company</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>Amount</th>
                                
                                
                                
                                <th>Currency</th>
                                
                                
                                
                                <th>PaymentMethod</th>
                                
                                
                                
                                <th>PaidAt</th>
                                
                                
                                
                                <th>Reference</th>
                                
                                
                                
                                <th>Notes</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {companies.payments_company && Array.isArray(companies.payments_company) &&
                              companies.payments_company.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/payments/payments-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="amount">
                                        { item.amount }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="currency">
                                        { item.currency }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="method">
                                        { item.method }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="paid_at">
                                        { dataFormatter.dateTimeFormatter(item.paid_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="reference">
                                        { item.reference }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="notes">
                                        { item.notes }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!companies?.payments_company?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Cost_items Company</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>Category</th>
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                <th>OccurredAt</th>
                                
                                
                                
                                <th>Amount</th>
                                
                                
                                
                                <th>Currency</th>
                                
                                
                                
                                <th>Vendor(FreeText)</th>
                                
                                
                                
                                <th>Reference</th>
                                
                                
                                
                                <th>Notes</th>
                                
                                
                                
                                
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {companies.cost_items_company && Array.isArray(companies.cost_items_company) &&
                              companies.cost_items_company.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/cost_items/cost_items-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="category">
                                        { item.category }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="occurred_at">
                                        { dataFormatter.dateTimeFormatter(item.occurred_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="amount">
                                        { item.amount }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="currency">
                                        { item.currency }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="vendor">
                                        { item.vendor }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="reference">
                                        { item.reference }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="notes">
                                        { item.notes }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!companies?.cost_items_company?.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;