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

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


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

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

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


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

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

              

              

              

              

              

              

              

              

              

              

              

              
              

                
                <>
                    <p className={'block font-bold mb-2'}>Users Organizations</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                <th>First Name</th>
                                
                                
                                
                                <th>Last Name</th>
                                
                                
                                
                                <th>Phone Number</th>
                                
                                
                                
                                <th>E-Mail</th>
                                
                                
                                
                                <th>Disabled</th>
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.users_organizations && Array.isArray(organizations.users_organizations) &&
                              organizations.users_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/users/users-view/?id=${item.id}`)}>
                                    
                                    
                                    <td data-label="firstName">
                                        { item.firstName }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="lastName">
                                        { item.lastName }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="phoneNumber">
                                        { item.phoneNumber }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="email">
                                        { item.email }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="disabled">
                                        { dataFormatter.booleanFormatter(item.disabled) }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.users_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                
                
                
                <>
                    <p className={'block font-bold mb-2'}>Workspaces organizations</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                <th>Name</th>
                                
                                
                                
                                <th>Plan</th>
                                
                                
                                
                                <th>DemoModeEnabled</th>
                                
                                
                                
                                <th>TrialEndsAt</th>
                                
                                
                                
                                <th>BillingEmail</th>
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.workspaces_organizations && Array.isArray(organizations.workspaces_organizations) &&
                              organizations.workspaces_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/workspaces/workspaces-view/?id=${item.id}`)}>
                                    
                                    
                                    <td data-label="name">
                                        { item.name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="plan">
                                        { item.plan }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="demo_mode_enabled">
                                        { dataFormatter.booleanFormatter(item.demo_mode_enabled) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="trial_ends_at">
                                        { dataFormatter.dateTimeFormatter(item.trial_ends_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="billing_email">
                                        { item.billing_email }
                                    </td>
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.workspaces_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>User_settings organizations</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                <th>TimeZone</th>
                                
                                
                                
                                <th>Locale</th>
                                
                                
                                
                                <th>Theme</th>
                                
                                
                                
                                <th>DefaultEntryMode</th>
                                
                                
                                
                                <th>VoiceModeEnabled</th>
                                
                                
                                
                                <th>PreferredVoice</th>
                                
                                
                                
                                <th>SpeechRate</th>
                                
                                
                                
                                <th>SpeechPitch</th>
                                
                                
                                
                                <th>SafeConfirmationsEnabled</th>
                                
                                
                                
                                <th>AutoArchiveDays</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.user_settings_organizations && Array.isArray(organizations.user_settings_organizations) &&
                              organizations.user_settings_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/user_settings/user_settings-view/?id=${item.id}`)}>
                                    
                                    
                                    <td data-label="time_zone">
                                        { item.time_zone }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="locale">
                                        { item.locale }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="theme">
                                        { item.theme }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="default_entry_mode">
                                        { item.default_entry_mode }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="voice_mode_enabled">
                                        { dataFormatter.booleanFormatter(item.voice_mode_enabled) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="preferred_voice">
                                        { item.preferred_voice }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="speech_rate">
                                        { item.speech_rate }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="speech_pitch">
                                        { item.speech_pitch }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="safe_confirmations_enabled">
                                        { dataFormatter.booleanFormatter(item.safe_confirmations_enabled) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="auto_archive_days">
                                        { item.auto_archive_days }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.user_settings_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Assistant_profiles organizations</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                <th>Name</th>
                                
                                
                                
                                <th>SystemPrompt</th>
                                
                                
                                
                                <th>ModelFamily</th>
                                
                                
                                
                                <th>ModelName</th>
                                
                                
                                
                                <th>Temperature</th>
                                
                                
                                
                                <th>MaxOutputTokens</th>
                                
                                
                                
                                <th>IsDefault</th>
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.assistant_profiles_organizations && Array.isArray(organizations.assistant_profiles_organizations) &&
                              organizations.assistant_profiles_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/assistant_profiles/assistant_profiles-view/?id=${item.id}`)}>
                                    
                                    
                                    <td data-label="name">
                                        { item.name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="system_prompt">
                                        { item.system_prompt }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="model_family">
                                        { item.model_family }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="model_name">
                                        { item.model_name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="temperature">
                                        { item.temperature }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="max_output_tokens">
                                        { item.max_output_tokens }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="is_default">
                                        { dataFormatter.booleanFormatter(item.is_default) }
                                    </td>
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.assistant_profiles_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Conversations organizations</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                <th>Title</th>
                                
                                
                                
                                <th>Mode</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                <th>DemoMode</th>
                                
                                
                                
                                <th>LastActivityAt</th>
                                
                                
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.conversations_organizations && Array.isArray(organizations.conversations_organizations) &&
                              organizations.conversations_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/conversations/conversations-view/?id=${item.id}`)}>
                                    
                                    
                                    <td data-label="title">
                                        { item.title }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="mode">
                                        { item.mode }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="demo_mode">
                                        { dataFormatter.booleanFormatter(item.demo_mode) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="last_activity_at">
                                        { dataFormatter.dateTimeFormatter(item.last_activity_at) }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.conversations_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Messages organizations</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>Role</th>
                                
                                
                                
                                <th>Content</th>
                                
                                
                                
                                <th>ContentFormat</th>
                                
                                
                                
                                <th>SentAt</th>
                                
                                
                                
                                <th>ToolName</th>
                                
                                
                                
                                <th>ToolCallKey</th>
                                
                                
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.messages_organizations && Array.isArray(organizations.messages_organizations) &&
                              organizations.messages_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/messages/messages-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="role">
                                        { item.role }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="content">
                                        { item.content }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="content_format">
                                        { item.content_format }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="sent_at">
                                        { dataFormatter.dateTimeFormatter(item.sent_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="tool_name">
                                        { item.tool_name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="tool_call_key">
                                        { item.tool_call_key }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.messages_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Voice_sessions organizations</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>State</th>
                                
                                
                                
                                <th>StartedAt</th>
                                
                                
                                
                                <th>EndedAt</th>
                                
                                
                                
                                <th>STTProvider</th>
                                
                                
                                
                                <th>TTSProvider</th>
                                
                                
                                
                                <th>DetectedLanguage</th>
                                
                                
                                
                                
                                
                                <th>LastError</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.voice_sessions_organizations && Array.isArray(organizations.voice_sessions_organizations) &&
                              organizations.voice_sessions_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/voice_sessions/voice_sessions-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="state">
                                        { item.state }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="started_at">
                                        { dataFormatter.dateTimeFormatter(item.started_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="ended_at">
                                        { dataFormatter.dateTimeFormatter(item.ended_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="stt_provider">
                                        { item.stt_provider }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="tts_provider">
                                        { item.tts_provider }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="detected_language">
                                        { item.detected_language }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="last_error">
                                        { item.last_error }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.voice_sessions_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Tool_providers organizations</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                <th>Name</th>
                                
                                
                                
                                <th>Kind</th>
                                
                                
                                
                                <th>BaseURL</th>
                                
                                
                                
                                <th>SupportsOAuth</th>
                                
                                
                                
                                <th>SupportsWebhook</th>
                                
                                
                                
                                <th>DocsURL</th>
                                
                                
                                
                                <th>IsActive</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.tool_providers_organizations && Array.isArray(organizations.tool_providers_organizations) &&
                              organizations.tool_providers_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/tool_providers/tool_providers-view/?id=${item.id}`)}>
                                    
                                    
                                    <td data-label="name">
                                        { item.name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="kind">
                                        { item.kind }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="base_url">
                                        { item.base_url }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="supports_oauth">
                                        { dataFormatter.booleanFormatter(item.supports_oauth) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="supports_webhook">
                                        { dataFormatter.booleanFormatter(item.supports_webhook) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="docs_url">
                                        { item.docs_url }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="is_active">
                                        { dataFormatter.booleanFormatter(item.is_active) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.tool_providers_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Tools organizations</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                <th>Name</th>
                                
                                
                                
                                <th>Slug</th>
                                
                                
                                
                                <th>Description</th>
                                
                                
                                
                                <th>Category</th>
                                
                                
                                
                                <th>ExecutionPreference</th>
                                
                                
                                
                                <th>RequiresConfirmation</th>
                                
                                
                                
                                <th>IsDemoSupported</th>
                                
                                
                                
                                <th>IsEnabled</th>
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.tools_organizations && Array.isArray(organizations.tools_organizations) &&
                              organizations.tools_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/tools/tools-view/?id=${item.id}`)}>
                                    
                                    
                                    <td data-label="name">
                                        { item.name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="slug">
                                        { item.slug }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="description">
                                        { item.description }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="category">
                                        { item.category }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="execution_preference">
                                        { item.execution_preference }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="requires_confirmation">
                                        { dataFormatter.booleanFormatter(item.requires_confirmation) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="is_demo_supported">
                                        { dataFormatter.booleanFormatter(item.is_demo_supported) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="is_enabled">
                                        { dataFormatter.booleanFormatter(item.is_enabled) }
                                    </td>
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.tools_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Tool_actions organizations</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>Name</th>
                                
                                
                                
                                <th>ActionKey</th>
                                
                                
                                
                                <th>InputSchema</th>
                                
                                
                                
                                <th>OutputSchema</th>
                                
                                
                                
                                <th>IsEnabled</th>
                                
                                
                                
                                <th>IsDangerous</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.tool_actions_organizations && Array.isArray(organizations.tool_actions_organizations) &&
                              organizations.tool_actions_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/tool_actions/tool_actions-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="name">
                                        { item.name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="action_key">
                                        { item.action_key }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="input_schema">
                                        { item.input_schema }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="output_schema">
                                        { item.output_schema }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="is_enabled">
                                        { dataFormatter.booleanFormatter(item.is_enabled) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="is_dangerous">
                                        { dataFormatter.booleanFormatter(item.is_dangerous) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.tool_actions_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Integrations organizations</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>Service</th>
                                
                                
                                
                                <th>AuthType</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                <th>ConnectedAt</th>
                                
                                
                                
                                <th>ExpiresAt</th>
                                
                                
                                
                                <th>AccountLabel</th>
                                
                                
                                
                                <th>Scopes</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.integrations_organizations && Array.isArray(organizations.integrations_organizations) &&
                              organizations.integrations_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/integrations/integrations-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="service">
                                        { item.service }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="auth_type">
                                        { item.auth_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="connected_at">
                                        { dataFormatter.dateTimeFormatter(item.connected_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="expires_at">
                                        { dataFormatter.dateTimeFormatter(item.expires_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="account_label">
                                        { item.account_label }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="scopes">
                                        { item.scopes }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.integrations_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Memory_items organizations</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>Category</th>
                                
                                
                                
                                <th>Key</th>
                                
                                
                                
                                <th>Value</th>
                                
                                
                                
                                <th>Visibility</th>
                                
                                
                                
                                <th>Confidence</th>
                                
                                
                                
                                <th>LastUsedAt</th>
                                
                                
                                
                                <th>UseCount</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.memory_items_organizations && Array.isArray(organizations.memory_items_organizations) &&
                              organizations.memory_items_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/memory_items/memory_items-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="category">
                                        { item.category }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="key">
                                        { item.key }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="value">
                                        { item.value }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="visibility">
                                        { item.visibility }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="confidence">
                                        { item.confidence }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="last_used_at">
                                        { dataFormatter.dateTimeFormatter(item.last_used_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="use_count">
                                        { item.use_count }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.memory_items_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Tasks organizations</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>Title</th>
                                
                                
                                
                                <th>Goal</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                <th>Priority</th>
                                
                                
                                
                                <th>DueAt</th>
                                
                                
                                
                                <th>RequiresConfirmation</th>
                                
                                
                                
                                <th>DemoMode</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.tasks_organizations && Array.isArray(organizations.tasks_organizations) &&
                              organizations.tasks_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/tasks/tasks-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="title">
                                        { item.title }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="goal">
                                        { item.goal }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="priority">
                                        { item.priority }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="due_at">
                                        { dataFormatter.dateTimeFormatter(item.due_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="requires_confirmation">
                                        { dataFormatter.booleanFormatter(item.requires_confirmation) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="demo_mode">
                                        { dataFormatter.booleanFormatter(item.demo_mode) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.tasks_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Task_steps organizations</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>StepNumber</th>
                                
                                
                                
                                <th>Title</th>
                                
                                
                                
                                <th>Details</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                
                                
                                <th>InputPayload</th>
                                
                                
                                
                                <th>OutputPayload</th>
                                
                                
                                
                                <th>ErrorMessage</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.task_steps_organizations && Array.isArray(organizations.task_steps_organizations) &&
                              organizations.task_steps_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/task_steps/task_steps-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="step_number">
                                        { item.step_number }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="title">
                                        { item.title }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="details">
                                        { item.details }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="input_payload">
                                        { item.input_payload }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="output_payload">
                                        { item.output_payload }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="error_message">
                                        { item.error_message }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.task_steps_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Tool_runs organizations</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                <th>StartedAt</th>
                                
                                
                                
                                <th>EndedAt</th>
                                
                                
                                
                                <th>InputPayload</th>
                                
                                
                                
                                <th>OutputPayload</th>
                                
                                
                                
                                <th>Logs</th>
                                
                                
                                
                                <th>ErrorMessage</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.tool_runs_organizations && Array.isArray(organizations.tool_runs_organizations) &&
                              organizations.tool_runs_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/tool_runs/tool_runs-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="started_at">
                                        { dataFormatter.dateTimeFormatter(item.started_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="ended_at">
                                        { dataFormatter.dateTimeFormatter(item.ended_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="input_payload">
                                        { item.input_payload }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="output_payload">
                                        { item.output_payload }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="logs">
                                        { item.logs }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="error_message">
                                        { item.error_message }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.tool_runs_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Confirmations organizations</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>State</th>
                                
                                
                                
                                <th>Summary</th>
                                
                                
                                
                                <th>RiskNotes</th>
                                
                                
                                
                                <th>RequestedAt</th>
                                
                                
                                
                                <th>RespondedAt</th>
                                
                                
                                
                                <th>UserResponse</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.confirmations_organizations && Array.isArray(organizations.confirmations_organizations) &&
                              organizations.confirmations_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/confirmations/confirmations-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="state">
                                        { item.state }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="summary">
                                        { item.summary }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="risk_notes">
                                        { item.risk_notes }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="requested_at">
                                        { dataFormatter.dateTimeFormatter(item.requested_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="responded_at">
                                        { dataFormatter.dateTimeFormatter(item.responded_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="user_response">
                                        { item.user_response }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.confirmations_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Meetings organizations</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>Platform</th>
                                
                                
                                
                                <th>Title</th>
                                
                                
                                
                                <th>JoinURL</th>
                                
                                
                                
                                <th>ScheduledStartAt</th>
                                
                                
                                
                                <th>ScheduledEndAt</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                
                                
                                <th>Transcript</th>
                                
                                
                                
                                <th>Summary</th>
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.meetings_organizations && Array.isArray(organizations.meetings_organizations) &&
                              organizations.meetings_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/meetings/meetings-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="platform">
                                        { item.platform }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="title">
                                        { item.title }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="join_url">
                                        { item.join_url }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="scheduled_start_at">
                                        { dataFormatter.dateTimeFormatter(item.scheduled_start_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="scheduled_end_at">
                                        { dataFormatter.dateTimeFormatter(item.scheduled_end_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="transcript">
                                        { item.transcript }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="summary">
                                        { item.summary }
                                    </td>
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.meetings_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Calendar_events organizations</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>ExternalEventKey</th>
                                
                                
                                
                                <th>Title</th>
                                
                                
                                
                                <th>Location</th>
                                
                                
                                
                                <th>StartAt</th>
                                
                                
                                
                                <th>EndAt</th>
                                
                                
                                
                                <th>Description</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.calendar_events_organizations && Array.isArray(organizations.calendar_events_organizations) &&
                              organizations.calendar_events_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/calendar_events/calendar_events-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="external_event_key">
                                        { item.external_event_key }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="title">
                                        { item.title }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="location">
                                        { item.location }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="start_at">
                                        { dataFormatter.dateTimeFormatter(item.start_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="end_at">
                                        { dataFormatter.dateTimeFormatter(item.end_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="description">
                                        { item.description }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.calendar_events_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Contacts organizations</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>DisplayName</th>
                                
                                
                                
                                <th>Email</th>
                                
                                
                                
                                <th>Phone</th>
                                
                                
                                
                                <th>TimeZone</th>
                                
                                
                                
                                <th>Notes</th>
                                
                                
                                
                                <th>IsFavorite</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.contacts_organizations && Array.isArray(organizations.contacts_organizations) &&
                              organizations.contacts_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/contacts/contacts-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="display_name">
                                        { item.display_name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="email">
                                        { item.email }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="phone">
                                        { item.phone }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="time_zone">
                                        { item.time_zone }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="notes">
                                        { item.notes }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="is_favorite">
                                        { dataFormatter.booleanFormatter(item.is_favorite) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.contacts_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Outbound_messages organizations</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>Channel</th>
                                
                                
                                
                                <th>Subject</th>
                                
                                
                                
                                <th>Body</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                <th>ScheduledAt</th>
                                
                                
                                
                                <th>SentAt</th>
                                
                                
                                
                                <th>ProviderMessageKey</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.outbound_messages_organizations && Array.isArray(organizations.outbound_messages_organizations) &&
                              organizations.outbound_messages_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/outbound_messages/outbound_messages-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="channel">
                                        { item.channel }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="subject">
                                        { item.subject }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="body">
                                        { item.body }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="scheduled_at">
                                        { dataFormatter.dateTimeFormatter(item.scheduled_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="sent_at">
                                        { dataFormatter.dateTimeFormatter(item.sent_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="provider_message_key">
                                        { item.provider_message_key }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.outbound_messages_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Travel_requests organizations</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>Origin</th>
                                
                                
                                
                                <th>Destination</th>
                                
                                
                                
                                <th>DepartAt</th>
                                
                                
                                
                                <th>ReturnAt</th>
                                
                                
                                
                                <th>TripType</th>
                                
                                
                                
                                <th>Cabin</th>
                                
                                
                                
                                <th>TravelersCount</th>
                                
                                
                                
                                <th>MaxBudget</th>
                                
                                
                                
                                <th>Preferences</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.travel_requests_organizations && Array.isArray(organizations.travel_requests_organizations) &&
                              organizations.travel_requests_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/travel_requests/travel_requests-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="origin">
                                        { item.origin }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="destination">
                                        { item.destination }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="depart_at">
                                        { dataFormatter.dateTimeFormatter(item.depart_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="return_at">
                                        { dataFormatter.dateTimeFormatter(item.return_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="trip_type">
                                        { item.trip_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="cabin">
                                        { item.cabin }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="travelers_count">
                                        { item.travelers_count }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="max_budget">
                                        { item.max_budget }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="preferences">
                                        { item.preferences }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.travel_requests_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Travel_bookings organizations</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>BookingType</th>
                                
                                
                                
                                <th>Provider</th>
                                
                                
                                
                                <th>ExternalBookingKey</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                <th>Amount</th>
                                
                                
                                
                                <th>Currency</th>
                                
                                
                                
                                <th>BookedAt</th>
                                
                                
                                
                                
                                
                                <th>Details</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.travel_bookings_organizations && Array.isArray(organizations.travel_bookings_organizations) &&
                              organizations.travel_bookings_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/travel_bookings/travel_bookings-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="booking_type">
                                        { item.booking_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="provider">
                                        { item.provider }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="external_booking_key">
                                        { item.external_booking_key }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="amount">
                                        { item.amount }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="currency">
                                        { item.currency }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="booked_at">
                                        { dataFormatter.dateTimeFormatter(item.booked_at) }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="details">
                                        { item.details }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.travel_bookings_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Payment_transactions organizations</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                <th>Amount</th>
                                
                                
                                
                                <th>Currency</th>
                                
                                
                                
                                <th>PaymentMethodType</th>
                                
                                
                                
                                <th>Merchant</th>
                                
                                
                                
                                <th>Description</th>
                                
                                
                                
                                <th>DemoMode</th>
                                
                                
                                
                                <th>ExternalTransactionKey</th>
                                
                                
                                
                                <th>InitiatedAt</th>
                                
                                
                                
                                <th>CompletedAt</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.payment_transactions_organizations && Array.isArray(organizations.payment_transactions_organizations) &&
                              organizations.payment_transactions_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/payment_transactions/payment_transactions-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="amount">
                                        { item.amount }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="currency">
                                        { item.currency }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="payment_method_type">
                                        { item.payment_method_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="merchant">
                                        { item.merchant }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="description">
                                        { item.description }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="demo_mode">
                                        { dataFormatter.booleanFormatter(item.demo_mode) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="external_transaction_key">
                                        { item.external_transaction_key }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="initiated_at">
                                        { dataFormatter.dateTimeFormatter(item.initiated_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="completed_at">
                                        { dataFormatter.dateTimeFormatter(item.completed_at) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.payment_transactions_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Native_app_checks organizations</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>AppKind</th>
                                
                                
                                
                                <th>IsAvailable</th>
                                
                                
                                
                                <th>Platform</th>
                                
                                
                                
                                <th>CheckedAt</th>
                                
                                
                                
                                <th>Notes</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.native_app_checks_organizations && Array.isArray(organizations.native_app_checks_organizations) &&
                              organizations.native_app_checks_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/native_app_checks/native_app_checks-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="app_kind">
                                        { item.app_kind }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="is_available">
                                        { dataFormatter.booleanFormatter(item.is_available) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="platform">
                                        { item.platform }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="checked_at">
                                        { dataFormatter.dateTimeFormatter(item.checked_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="notes">
                                        { item.notes }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.native_app_checks_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Audit_logs organizations</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>EventType</th>
                                
                                
                                
                                <th>EventSummary</th>
                                
                                
                                
                                <th>EventPayload</th>
                                
                                
                                
                                <th>IPAddress</th>
                                
                                
                                
                                <th>UserAgent</th>
                                
                                
                                
                                <th>OccurredAt</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.audit_logs_organizations && Array.isArray(organizations.audit_logs_organizations) &&
                              organizations.audit_logs_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/audit_logs/audit_logs-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="event_type">
                                        { item.event_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="event_summary">
                                        { item.event_summary }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="event_payload">
                                        { item.event_payload }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="ip_address">
                                        { item.ip_address }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="user_agent">
                                        { item.user_agent }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="occurred_at">
                                        { dataFormatter.dateTimeFormatter(item.occurred_at) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.audit_logs_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                

                <BaseDivider />

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

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

export default OrganizationsView;