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

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


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

    const { id } = router.query;
    
    function removeLastCharacter(str) {
      console.log(str,`str`)
      return str.slice(0, -1);
    }

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


    return (
      <>
          <Head>
              <title>{getPageTitle('View companies')}</title>
          </Head>
          <SectionMain>
            <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={removeLastCharacter('View companies')} main>
                <BaseButton
                  color='info'
                  label='Edit'
                  href={`/companies/companies-edit/?id=${id}`}
                />
            </SectionTitleLineWithButton>
            <CardBox>
            

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

              

              

              

              

              

              

              

              

              

              

              

              
              

                
                <>
                    <p className={'block font-bold mb-2'}>Users Companies</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                <th>First Name</th>
                                
                                
                                
                                <th>Last Name</th>
                                
                                
                                
                                <th>Phone Number</th>
                                
                                
                                
                                <th>E-Mail</th>
                                
                                
                                
                                <th>Disabled</th>
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {companies.users_companies && Array.isArray(companies.users_companies) &&
                              companies.users_companies.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/users/users-view/?id=${item.id}`)}>
                                    
                                    
                                    <td data-label="firstName">
                                        { item.firstName }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="lastName">
                                        { item.lastName }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="phoneNumber">
                                        { item.phoneNumber }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="email">
                                        { item.email }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="disabled">
                                        { dataFormatter.booleanFormatter(item.disabled) }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!companies?.users_companies?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                
                
                
                <>
                    <p className={'block font-bold mb-2'}>Drivers Company</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>DriverCode</th>
                                
                                
                                
                                <th>DriverName</th>
                                
                                
                                
                                <th>Phone</th>
                                
                                
                                
                                <th>Email</th>
                                
                                
                                
                                <th>Address</th>
                                
                                
                                
                                <th>LicenseNumber</th>
                                
                                
                                
                                <th>LicenseExpiryDate</th>
                                
                                
                                
                                <th>NationalID</th>
                                
                                
                                
                                <th>TRN/TaxID</th>
                                
                                
                                
                                <th>SecurityDeposit</th>
                                
                                
                                
                                <th>CreditLimit</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                <th>Notes</th>
                                
                                
                                
                                <th>CreatedOn</th>
                                
                                
                                
                                <th>ModifiedOn</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {companies.drivers_company && Array.isArray(companies.drivers_company) &&
                              companies.drivers_company.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/drivers/drivers-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="driver_code">
                                        { item.driver_code }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="driver_name">
                                        { item.driver_name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="phone">
                                        { item.phone }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="email">
                                        { item.email }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="address">
                                        { item.address }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="license_number">
                                        { item.license_number }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="license_expiry_date">
                                        { dataFormatter.dateTimeFormatter(item.license_expiry_date) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="national_id">
                                        { item.national_id }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="trn_tax_id">
                                        { item.trn_tax_id }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="security_deposit">
                                        { item.security_deposit }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="credit_limit">
                                        { item.credit_limit }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="notes">
                                        { item.notes }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="created_on">
                                        { dataFormatter.dateTimeFormatter(item.created_on) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="modified_on">
                                        { dataFormatter.dateTimeFormatter(item.modified_on) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!companies?.drivers_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>VehicleCode</th>
                                
                                
                                
                                <th>PlateNo</th>
                                
                                
                                
                                <th>EngineNo</th>
                                
                                
                                
                                <th>ChassisNo</th>
                                
                                
                                
                                <th>Make</th>
                                
                                
                                
                                <th>Model</th>
                                
                                
                                
                                <th>Year</th>
                                
                                
                                
                                <th>Colour</th>
                                
                                
                                
                                <th>Category</th>
                                
                                
                                
                                <th>PurchaseDate</th>
                                
                                
                                
                                <th>PurchaseCost</th>
                                
                                
                                
                                <th>OwnershipType</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                
                                
                                <th>Branch</th>
                                
                                
                                
                                <th>Odometer</th>
                                
                                
                                
                                <th>InsurancePolicyNo</th>
                                
                                
                                
                                <th>Notes</th>
                                
                                
                                
                                <th>CreatedOn</th>
                                
                                
                                
                                <th>ModifiedOn</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="vehicle_code">
                                        { item.vehicle_code }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="plate_no">
                                        { item.plate_no }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="engine_no">
                                        { item.engine_no }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="chassis_no">
                                        { item.chassis_no }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="make">
                                        { item.make }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="model">
                                        { item.model }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="year">
                                        { item.year }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="colour">
                                        { item.colour }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="category">
                                        { item.category }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="purchase_date">
                                        { dataFormatter.dateTimeFormatter(item.purchase_date) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="purchase_cost">
                                        { item.purchase_cost }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="ownership_type">
                                        { item.ownership_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="branch">
                                        { item.branch }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="odometer">
                                        { item.odometer }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="insurance_policy_no">
                                        { item.insurance_policy_no }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="notes">
                                        { item.notes }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="created_on">
                                        { dataFormatter.dateTimeFormatter(item.created_on) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="modified_on">
                                        { dataFormatter.dateTimeFormatter(item.modified_on) }
                                    </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'}>Agreements Company</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>AgreementNumber</th>
                                
                                
                                
                                
                                
                                
                                
                                <th>AgreementType</th>
                                
                                
                                
                                <th>BillingFrequency</th>
                                
                                
                                
                                <th>DailyRate</th>
                                
                                
                                
                                <th>WeeklyRate</th>
                                
                                
                                
                                <th>MonthlyRate</th>
                                
                                
                                
                                <th>DepositRequired</th>
                                
                                
                                
                                <th>DepositAmount</th>
                                
                                
                                
                                <th>StartDate</th>
                                
                                
                                
                                <th>EndDate</th>
                                
                                
                                
                                <th>RecurringInvoiceEnabled</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                <th>Notes</th>
                                
                                
                                
                                <th>CreatedOn</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {companies.agreements_company && Array.isArray(companies.agreements_company) &&
                              companies.agreements_company.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/agreements/agreements-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="agreement_number">
                                        { item.agreement_number }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="agreement_type">
                                        { item.agreement_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="billing_frequency">
                                        { item.billing_frequency }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="daily_rate">
                                        { item.daily_rate }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="weekly_rate">
                                        { item.weekly_rate }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="monthly_rate">
                                        { item.monthly_rate }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="deposit_required">
                                        { dataFormatter.booleanFormatter(item.deposit_required) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="deposit_amount">
                                        { item.deposit_amount }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="start_date">
                                        { dataFormatter.dateTimeFormatter(item.start_date) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="end_date">
                                        { dataFormatter.dateTimeFormatter(item.end_date) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="recurring_invoice_enabled">
                                        { dataFormatter.booleanFormatter(item.recurring_invoice_enabled) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="notes">
                                        { item.notes }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="created_on">
                                        { dataFormatter.dateTimeFormatter(item.created_on) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!companies?.agreements_company?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Recurring_invoice_templates Company</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>BillingFrequency</th>
                                
                                
                                
                                <th>Rate</th>
                                
                                
                                
                                <th>NextRunDate</th>
                                
                                
                                
                                <th>LastRunDate</th>
                                
                                
                                
                                <th>Active</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {companies.recurring_invoice_templates_company && Array.isArray(companies.recurring_invoice_templates_company) &&
                              companies.recurring_invoice_templates_company.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/recurring_invoice_templates/recurring_invoice_templates-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="billing_frequency">
                                        { item.billing_frequency }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="rate">
                                        { item.rate }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="next_run_date">
                                        { dataFormatter.dateTimeFormatter(item.next_run_date) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="last_run_date">
                                        { dataFormatter.dateTimeFormatter(item.last_run_date) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="active_flag">
                                        { dataFormatter.booleanFormatter(item.active_flag) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!companies?.recurring_invoice_templates_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>InvoiceNo</th>
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                <th>IssueDate</th>
                                
                                
                                
                                <th>DueDate</th>
                                
                                
                                
                                <th>WeekStart</th>
                                
                                
                                
                                <th>WeekEnd</th>
                                
                                
                                
                                <th>BillingDays</th>
                                
                                
                                
                                <th>HolidayDays</th>
                                
                                
                                
                                <th>BillableDays</th>
                                
                                
                                
                                <th>DailyRate</th>
                                
                                
                                
                                <th>GrossAmount</th>
                                
                                
                                
                                <th>ExpenseDeductions</th>
                                
                                
                                
                                <th>NetAmount</th>
                                
                                
                                
                                <th>AmountPaid</th>
                                
                                
                                
                                <th>BalanceDue</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                <th>CreatedOn</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="invoice_no">
                                        { item.invoice_no }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="issue_date">
                                        { dataFormatter.dateTimeFormatter(item.issue_date) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="due_date">
                                        { dataFormatter.dateTimeFormatter(item.due_date) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="week_start">
                                        { dataFormatter.dateTimeFormatter(item.week_start) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="week_end">
                                        { dataFormatter.dateTimeFormatter(item.week_end) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="billing_days">
                                        { item.billing_days }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="holiday_days">
                                        { item.holiday_days }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="billable_days">
                                        { item.billable_days }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="daily_rate">
                                        { item.daily_rate }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="gross_amount">
                                        { item.gross_amount }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="expense_deductions">
                                        { item.expense_deductions }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="net_amount">
                                        { item.net_amount }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="amount_paid">
                                        { item.amount_paid }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="balance_due">
                                        { item.balance_due }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="created_on">
                                        { dataFormatter.dateTimeFormatter(item.created_on) }
                                    </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'}>Chart_of_accounts Company</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>AccountCode</th>
                                
                                
                                
                                <th>AccountName</th>
                                
                                
                                
                                <th>AccountType</th>
                                
                                
                                
                                <th>Category</th>
                                
                                
                                
                                <th>NormalBalance</th>
                                
                                
                                
                                
                                
                                <th>Status</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {companies.chart_of_accounts_company && Array.isArray(companies.chart_of_accounts_company) &&
                              companies.chart_of_accounts_company.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/chart_of_accounts/chart_of_accounts-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="account_code">
                                        { item.account_code }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="account_name">
                                        { item.account_name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="account_type">
                                        { item.account_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="category">
                                        { item.category }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="normal_balance">
                                        { item.normal_balance }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!companies?.chart_of_accounts_company?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Invoice_lines companies</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>LineType</th>
                                
                                
                                
                                <th>Description</th>
                                
                                
                                
                                <th>Quantity</th>
                                
                                
                                
                                <th>Rate</th>
                                
                                
                                
                                <th>Amount</th>
                                
                                
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {companies.invoice_lines_companies && Array.isArray(companies.invoice_lines_companies) &&
                              companies.invoice_lines_companies.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/invoice_lines/invoice_lines-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="line_type">
                                        { item.line_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="description">
                                        { item.description }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="quantity">
                                        { item.quantity }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="rate">
                                        { item.rate }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="amount">
                                        { item.amount }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!companies?.invoice_lines_companies?.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>PaymentRef</th>
                                
                                
                                
                                <th>PaymentDate</th>
                                
                                
                                
                                
                                
                                <th>Amount</th>
                                
                                
                                
                                <th>AllocatedAmount</th>
                                
                                
                                
                                <th>UnallocatedAmount</th>
                                
                                
                                
                                <th>Method</th>
                                
                                
                                
                                <th>ReferenceNo</th>
                                
                                
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                <th>Notes</th>
                                
                                
                                
                                <th>CreatedOn</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="payment_ref">
                                        { item.payment_ref }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="payment_date">
                                        { dataFormatter.dateTimeFormatter(item.payment_date) }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="amount">
                                        { item.amount }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="allocated_amount">
                                        { item.allocated_amount }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="unallocated_amount">
                                        { item.unallocated_amount }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="method">
                                        { item.method }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="reference_no">
                                        { item.reference_no }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="notes">
                                        { item.notes }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="created_on">
                                        { dataFormatter.dateTimeFormatter(item.created_on) }
                                    </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'}>Payment_allocations companies</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>AllocationDate</th>
                                
                                
                                
                                <th>AmountAllocated</th>
                                
                                
                                
                                <th>Notes</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {companies.payment_allocations_companies && Array.isArray(companies.payment_allocations_companies) &&
                              companies.payment_allocations_companies.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/payment_allocations/payment_allocations-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="allocation_date">
                                        { dataFormatter.dateTimeFormatter(item.allocation_date) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="amount_allocated">
                                        { item.amount_allocated }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="notes">
                                        { item.notes }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!companies?.payment_allocations_companies?.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>VendorCode</th>
                                
                                
                                
                                <th>VendorName</th>
                                
                                
                                
                                <th>Phone</th>
                                
                                
                                
                                <th>Email</th>
                                
                                
                                
                                <th>Address</th>
                                
                                
                                
                                <th>TaxID</th>
                                
                                
                                
                                <th>PaymentTerms</th>
                                
                                
                                
                                <th>Status</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="vendor_code">
                                        { item.vendor_code }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="vendor_name">
                                        { item.vendor_name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="phone">
                                        { item.phone }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="email">
                                        { item.email }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="address">
                                        { item.address }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="tax_id">
                                        { item.tax_id }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="payment_terms">
                                        { item.payment_terms }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </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'}>Vehicle_expenses Company</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>ExpenseNo</th>
                                
                                
                                
                                <th>Date</th>
                                
                                
                                
                                
                                
                                
                                
                                <th>ExpenseCategory</th>
                                
                                
                                
                                <th>Description</th>
                                
                                
                                
                                <th>Amount</th>
                                
                                
                                
                                <th>TaxAmount</th>
                                
                                
                                
                                <th>GrossAmount</th>
                                
                                
                                
                                
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                
                                
                                <th>CreatedOn</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {companies.vehicle_expenses_company && Array.isArray(companies.vehicle_expenses_company) &&
                              companies.vehicle_expenses_company.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/vehicle_expenses/vehicle_expenses-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="expense_no">
                                        { item.expense_no }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="date">
                                        { dataFormatter.dateTimeFormatter(item.date) }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="expense_category">
                                        { item.expense_category }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="description">
                                        { item.description }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="amount">
                                        { item.amount }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="tax_amount">
                                        { item.tax_amount }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="gross_amount">
                                        { item.gross_amount }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="created_on">
                                        { dataFormatter.dateTimeFormatter(item.created_on) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!companies?.vehicle_expenses_company?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Driver_expenses Company</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>Date</th>
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                <th>ExpenseCategory</th>
                                
                                
                                
                                <th>Description</th>
                                
                                
                                
                                <th>Amount</th>
                                
                                
                                
                                
                                
                                
                                
                                <th>ChargeToDriver</th>
                                
                                
                                
                                <th>BillableToDriver</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                
                                
                                <th>CreatedOn</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {companies.driver_expenses_company && Array.isArray(companies.driver_expenses_company) &&
                              companies.driver_expenses_company.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/driver_expenses/driver_expenses-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="date">
                                        { dataFormatter.dateTimeFormatter(item.date) }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="expense_category">
                                        { item.expense_category }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="description">
                                        { item.description }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="amount">
                                        { item.amount }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="charge_to_driver_flag">
                                        { dataFormatter.booleanFormatter(item.charge_to_driver_flag) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="billable_to_driver_flag">
                                        { dataFormatter.booleanFormatter(item.billable_to_driver_flag) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="created_on">
                                        { dataFormatter.dateTimeFormatter(item.created_on) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!companies?.driver_expenses_company?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Bills Company</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>BillNo</th>
                                
                                
                                
                                
                                
                                
                                
                                <th>BillDate</th>
                                
                                
                                
                                <th>DueDate</th>
                                
                                
                                
                                <th>GrossAmount</th>
                                
                                
                                
                                <th>AmountPaid</th>
                                
                                
                                
                                <th>BalanceDue</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {companies.bills_company && Array.isArray(companies.bills_company) &&
                              companies.bills_company.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/bills/bills-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="bill_no">
                                        { item.bill_no }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="bill_date">
                                        { dataFormatter.dateTimeFormatter(item.bill_date) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="due_date">
                                        { dataFormatter.dateTimeFormatter(item.due_date) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="gross_amount">
                                        { item.gross_amount }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="amount_paid">
                                        { item.amount_paid }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="balance_due">
                                        { item.balance_due }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!companies?.bills_company?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Bill_lines companies</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>Description</th>
                                
                                
                                
                                
                                
                                <th>Amount</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {companies.bill_lines_companies && Array.isArray(companies.bill_lines_companies) &&
                              companies.bill_lines_companies.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/bill_lines/bill_lines-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="description">
                                        { item.description }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="amount">
                                        { item.amount }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!companies?.bill_lines_companies?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Bill_payments companies</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>PaymentDate</th>
                                
                                
                                
                                <th>Amount</th>
                                
                                
                                
                                
                                
                                <th>ReferenceNo</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {companies.bill_payments_companies && Array.isArray(companies.bill_payments_companies) &&
                              companies.bill_payments_companies.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/bill_payments/bill_payments-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="payment_date">
                                        { dataFormatter.dateTimeFormatter(item.payment_date) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="amount">
                                        { item.amount }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="reference_no">
                                        { item.reference_no }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!companies?.bill_payments_companies?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Ledger_entries Company</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>EntryNo</th>
                                
                                
                                
                                <th>TransactionDate</th>
                                
                                
                                
                                <th>SourceModule</th>
                                
                                
                                
                                <th>SourceRef</th>
                                
                                
                                
                                
                                
                                <th>Debit</th>
                                
                                
                                
                                <th>Credit</th>
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                <th>Description</th>
                                
                                
                                
                                <th>CreatedOn</th>
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {companies.ledger_entries_company && Array.isArray(companies.ledger_entries_company) &&
                              companies.ledger_entries_company.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/ledger_entries/ledger_entries-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="entry_no">
                                        { item.entry_no }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="transaction_date">
                                        { dataFormatter.dateTimeFormatter(item.transaction_date) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="source_module">
                                        { item.source_module }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="source_ref">
                                        { item.source_ref }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="debit">
                                        { item.debit }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="credit">
                                        { item.credit }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="description">
                                        { item.description }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="created_on">
                                        { dataFormatter.dateTimeFormatter(item.created_on) }
                                    </td>
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!companies?.ledger_entries_company?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Loan_schedules Company</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>BankName</th>
                                
                                
                                
                                <th>PaymentNo</th>
                                
                                
                                
                                <th>PaymentDate</th>
                                
                                
                                
                                <th>PaymentAmount</th>
                                
                                
                                
                                <th>Principal</th>
                                
                                
                                
                                <th>Interest</th>
                                
                                
                                
                                <th>RemainingBalance</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {companies.loan_schedules_company && Array.isArray(companies.loan_schedules_company) &&
                              companies.loan_schedules_company.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/loan_schedules/loan_schedules-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="bank_name">
                                        { item.bank_name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="payment_no">
                                        { item.payment_no }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="payment_date">
                                        { dataFormatter.dateTimeFormatter(item.payment_date) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="payment_amount">
                                        { item.payment_amount }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="principal">
                                        { item.principal }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="interest">
                                        { item.interest }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="remaining_balance">
                                        { item.remaining_balance }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!companies?.loan_schedules_company?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Vehicle_compliance Company</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>RegistrationExpiry</th>
                                
                                
                                
                                <th>FitnessExpiry</th>
                                
                                
                                
                                <th>InsuranceExpiry</th>
                                
                                
                                
                                <th>InsurancePolicyNo</th>
                                
                                
                                
                                <th>CertificateNo</th>
                                
                                
                                
                                <th>Mileage</th>
                                
                                
                                
                                <th>RegistrationStatus</th>
                                
                                
                                
                                <th>InsuranceStatus</th>
                                
                                
                                
                                <th>FitnessStatus</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {companies.vehicle_compliance_company && Array.isArray(companies.vehicle_compliance_company) &&
                              companies.vehicle_compliance_company.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/vehicle_compliance/vehicle_compliance-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="registration_expiry">
                                        { dataFormatter.dateTimeFormatter(item.registration_expiry) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="fitness_expiry">
                                        { dataFormatter.dateTimeFormatter(item.fitness_expiry) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="insurance_expiry">
                                        { dataFormatter.dateTimeFormatter(item.insurance_expiry) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="insurance_policy_no">
                                        { item.insurance_policy_no }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="certificate_no">
                                        { item.certificate_no }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="mileage">
                                        { item.mileage }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="registration_status">
                                        { item.registration_status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="insurance_status">
                                        { item.insurance_status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="fitness_status">
                                        { item.fitness_status }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!companies?.vehicle_compliance_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>EntityType</th>
                                
                                
                                
                                <th>EntityRef</th>
                                
                                
                                
                                <th>FileName</th>
                                
                                
                                
                                <th>FileURL</th>
                                
                                
                                
                                
                                
                                <th>UploadedAt</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="entity_type">
                                        { item.entity_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="entity_ref">
                                        { item.entity_ref }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="file_name">
                                        { item.file_name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="file_url">
                                        { item.file_url }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="uploaded_at">
                                        { dataFormatter.dateTimeFormatter(item.uploaded_at) }
                                    </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'}>Audit_logs Company</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>Module</th>
                                
                                
                                
                                <th>RecordRef</th>
                                
                                
                                
                                <th>Action</th>
                                
                                
                                
                                <th>OldValue</th>
                                
                                
                                
                                <th>NewValue</th>
                                
                                
                                
                                <th>Timestamp</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {companies.audit_logs_company && Array.isArray(companies.audit_logs_company) &&
                              companies.audit_logs_company.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/audit_logs/audit_logs-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="module">
                                        { item.module }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="record_ref">
                                        { item.record_ref }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="action">
                                        { item.action }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="old_value">
                                        { item.old_value }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="new_value">
                                        { item.new_value }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="timestamp">
                                        { dataFormatter.dateTimeFormatter(item.timestamp) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!companies?.audit_logs_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;