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'}>Access_roles 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>UserCount</th>

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

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

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

          <>
            <p className={'block font-bold mb-2'}>Ai_agents Organization</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>Version</th>

                      <th>AccuracyPercentage</th>

                      <th>Latency(ms)</th>

                      <th>Status</th>

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

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

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

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

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

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

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

                      <th>AccuracyPercentage</th>

                      <th>Latency(ms)</th>

                      <th>Status</th>

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

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

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

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

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

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

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

                      <th>Severity</th>

                      <th>Message</th>

                      <th>Status</th>

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

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

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

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

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

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

                      <th>Severity</th>

                      <th>Message</th>

                      <th>Status</th>

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

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

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

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

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

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

                      <th>Status</th>

                      <th>Runtime(ms)</th>

                      <th>ErrorMessage</th>

                      <th>StartedAt</th>

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

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

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

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

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

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

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

                      <th>Status</th>

                      <th>Runtime(ms)</th>

                      <th>ErrorMessage</th>

                      <th>StartedAt</th>

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

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

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

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

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

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

          <>
            <p className={'block font-bold mb-2'}>Campaigns Organization</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>Spend</th>

                      <th>Impressions</th>

                      <th>Clicks</th>

                      <th>Conversions</th>

                      <th>CostPerAcquisition</th>

                      <th>ClickThroughRatePercentage</th>

                      <th>Status</th>

                      <th>StartDate</th>

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

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

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

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

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

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

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

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

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

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

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

                      <th>Impressions</th>

                      <th>Clicks</th>

                      <th>Conversions</th>

                      <th>CostPerAcquisition</th>

                      <th>ClickThroughRatePercentage</th>

                      <th>Status</th>

                      <th>StartDate</th>

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

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

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

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

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

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

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

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

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

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

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

                      <th>Result</th>

                      <th>IssuesFound</th>

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

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

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

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

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

                      <th>Result</th>

                      <th>IssuesFound</th>

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

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

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

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

          <>
            <p className={'block font-bold mb-2'}>
              Compliance_issues Organization
            </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>Description</th>

                      <th>Severity</th>

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

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

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

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

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

                      <th>Severity</th>

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

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

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

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

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

                      <th>Status</th>

                      <th>ProjectedROIPercentage</th>

                      <th>StartDate</th>

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

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

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

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

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

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

                      <th>Status</th>

                      <th>ProjectedROIPercentage</th>

                      <th>StartDate</th>

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

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

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

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

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

          <>
            <p className={'block font-bold mb-2'}>
              Infrastructure_statuses Organization
            </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>UptimePercentage</th>

                      <th>Latency(ms)</th>

                      <th>ErrorRate</th>

                      <th>Status</th>

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

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

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

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

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

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

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

                      <th>Latency(ms)</th>

                      <th>ErrorRate</th>

                      <th>Status</th>

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

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

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

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

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

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

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

                      <th>Amount</th>

                      <th>Status</th>

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

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

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

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

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

                      <th>Amount</th>

                      <th>Status</th>

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

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

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

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

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

                      <th>Type</th>

                      <th>Description</th>

                      <th>DateDetected</th>

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

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

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

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

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

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

                      <th>Type</th>

                      <th>Description</th>

                      <th>DateDetected</th>

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

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

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

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

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

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

                      <th>Status</th>

                      <th>StartDate</th>

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

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

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

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

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

                      <th>Status</th>

                      <th>StartDate</th>

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

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

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

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

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

                      <th>Message</th>

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

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

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

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

                      <th>Prescriptions</th>

                      <th>Appointments</th>

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

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

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

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

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

                      <th>APILatency(ms)</th>

                      <th>UptimePercentage</th>

                      <th>PageLoad(ms)</th>

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

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

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

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

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

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

                      <th>APILatency(ms)</th>

                      <th>UptimePercentage</th>

                      <th>PageLoad(ms)</th>

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

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

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

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

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

          <>
            <p className={'block font-bold mb-2'}>
              Pricing_strategies Organization
            </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>Product</th>

                      <th>Price</th>

                      <th>Status</th>

                      <th>StartDate</th>

                      <th>EndDate</th>

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

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

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

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

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

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

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

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

                      <th>Price</th>

                      <th>Status</th>

                      <th>StartDate</th>

                      <th>EndDate</th>

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

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

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

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

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

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

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

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

                      <th>TotalAmount</th>

                      <th>PayerBreakdown</th>

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

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

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

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

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

                      <th>TotalAmount</th>

                      <th>PayerBreakdown</th>

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

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

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

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

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

                      <th>Object</th>

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

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

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

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

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

                      <th>Email</th>

                      <th>Role</th>

                      <th>Status</th>

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

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

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

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

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

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

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

                      <th>Email</th>

                      <th>Role</th>

                      <th>Status</th>

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

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

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

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

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

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

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

                      <th>Category</th>

                      <th>Priority</th>

                      <th>Status</th>

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

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

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

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

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

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

                      <th>Category</th>

                      <th>Priority</th>

                      <th>Status</th>

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

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

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

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

                            <td data-label='resolved_at'>
                              {dataFormatter.dateTimeFormatter(
                                item.resolved_at,
                              )}
                            </td>
                          </tr>
                        ),
                      )}
                  </tbody>
                </table>
              </div>
              {!organizations?.support_tickets_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;
