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'}>Role_permissions organizations</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                <th>Resource</th>
                                
                                
                                
                                <th>Action</th>
                                
                                
                                
                                <th>Allowed</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.role_permissions_organizations && Array.isArray(organizations.role_permissions_organizations) &&
                              organizations.role_permissions_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/role_permissions/role_permissions-view/?id=${item.id}`)}>
                                    
                                    
                                    <td data-label="resource">
                                        { item.resource }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="action">
                                        { item.action }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="allowed">
                                        { dataFormatter.booleanFormatter(item.allowed) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.role_permissions_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Memberships Organization</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>JoinedAt</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.memberships_organization && Array.isArray(organizations.memberships_organization) &&
                              organizations.memberships_organization.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/memberships/memberships-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="joined_at">
                                        { dataFormatter.dateTimeFormatter(item.joined_at) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.memberships_organization?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Events Organization</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>EventName</th>
                                
                                
                                
                                
                                
                                <th>Category</th>
                                
                                
                                
                                <th>StartsAt</th>
                                
                                
                                
                                <th>EndsAt</th>
                                
                                
                                
                                
                                
                                <th>Privacy</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.events_organization && Array.isArray(organizations.events_organization) &&
                              organizations.events_organization.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/events/events-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="name">
                                        { item.name }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="category">
                                        { item.category }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="starts_at">
                                        { dataFormatter.dateTimeFormatter(item.starts_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="ends_at">
                                        { dataFormatter.dateTimeFormatter(item.ends_at) }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="privacy">
                                        { item.privacy }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.events_organization?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Albums 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>Privacy</th>
                                
                                
                                
                                <th>CollaborationMode</th>
                                
                                
                                
                                <th>AllowDownloads</th>
                                
                                
                                
                                <th>AllowComments</th>
                                
                                
                                
                                <th>AllowLikes</th>
                                
                                
                                
                                <th>AllowTagging</th>
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.albums_organizations && Array.isArray(organizations.albums_organizations) &&
                              organizations.albums_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/albums/albums-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="title">
                                        { item.title }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="privacy">
                                        { item.privacy }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="collaboration_mode">
                                        { item.collaboration_mode }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="allow_downloads">
                                        { dataFormatter.booleanFormatter(item.allow_downloads) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="allow_comments">
                                        { dataFormatter.booleanFormatter(item.allow_comments) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="allow_likes">
                                        { dataFormatter.booleanFormatter(item.allow_likes) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="allow_tagging">
                                        { dataFormatter.booleanFormatter(item.allow_tagging) }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.albums_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Album_collaborators 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>InvitedAt</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.album_collaborators_organizations && Array.isArray(organizations.album_collaborators_organizations) &&
                              organizations.album_collaborators_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/album_collaborators/album_collaborators-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="role">
                                        { item.role }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="invited_at">
                                        { dataFormatter.dateTimeFormatter(item.invited_at) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.album_collaborators_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Access_rules organizations</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>SubjectType</th>
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                <th>Permission</th>
                                
                                
                                
                                <th>ExpiresAt</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.access_rules_organizations && Array.isArray(organizations.access_rules_organizations) &&
                              organizations.access_rules_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/access_rules/access_rules-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="subject_type">
                                        { item.subject_type }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="permission">
                                        { item.permission }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="expires_at">
                                        { dataFormatter.dateTimeFormatter(item.expires_at) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.access_rules_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Media_items organizations</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                
                                
                                <th>MediaType</th>
                                
                                
                                
                                <th>Title</th>
                                
                                
                                
                                
                                
                                <th>CapturedAt</th>
                                
                                
                                
                                <th>UploadedAt</th>
                                
                                
                                
                                <th>Width</th>
                                
                                
                                
                                <th>Height</th>
                                
                                
                                
                                <th>DurationSeconds</th>
                                
                                
                                
                                <th>CameraMake</th>
                                
                                
                                
                                <th>CameraModel</th>
                                
                                
                                
                                <th>GPSLatitude</th>
                                
                                
                                
                                <th>GPSLongitude</th>
                                
                                
                                
                                <th>Visibility</th>
                                
                                
                                
                                <th>IsDuplicate</th>
                                
                                
                                
                                <th>DuplicateGroupKey</th>
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.media_items_organizations && Array.isArray(organizations.media_items_organizations) &&
                              organizations.media_items_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/media_items/media_items-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="media_type">
                                        { item.media_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="title">
                                        { item.title }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="captured_at">
                                        { dataFormatter.dateTimeFormatter(item.captured_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="uploaded_at">
                                        { dataFormatter.dateTimeFormatter(item.uploaded_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="width">
                                        { item.width }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="height">
                                        { item.height }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="duration_seconds">
                                        { item.duration_seconds }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="camera_make">
                                        { item.camera_make }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="camera_model">
                                        { item.camera_model }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="gps_latitude">
                                        { item.gps_latitude }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="gps_longitude">
                                        { item.gps_longitude }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="visibility">
                                        { item.visibility }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="is_duplicate">
                                        { dataFormatter.booleanFormatter(item.is_duplicate) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="duplicate_group_key">
                                        { item.duplicate_group_key }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.media_items_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Storage_buckets Organization</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>Provider</th>
                                
                                
                                
                                <th>BucketName</th>
                                
                                
                                
                                <th>Region</th>
                                
                                
                                
                                <th>CDNDomain</th>
                                
                                
                                
                                <th>DefaultBucket</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.storage_buckets_organization && Array.isArray(organizations.storage_buckets_organization) &&
                              organizations.storage_buckets_organization.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/storage_buckets/storage_buckets-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="provider">
                                        { item.provider }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="bucket_name">
                                        { item.bucket_name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="region">
                                        { item.region }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="cdn_domain">
                                        { item.cdn_domain }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="default_bucket">
                                        { dataFormatter.booleanFormatter(item.default_bucket) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.storage_buckets_organization?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Storage_objects organizations</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>ObjectKey</th>
                                
                                
                                
                                <th>ContentType</th>
                                
                                
                                
                                <th>SizeBytes</th>
                                
                                
                                
                                <th>ETag</th>
                                
                                
                                
                                <th>SHA256</th>
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                <th>CompressionRatio</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                <th>TrashedAt</th>
                                
                                
                                
                                <th>PurgeAfter</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.storage_objects_organizations && Array.isArray(organizations.storage_objects_organizations) &&
                              organizations.storage_objects_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/storage_objects/storage_objects-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="object_key">
                                        { item.object_key }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="content_type">
                                        { item.content_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="size_bytes">
                                        { item.size_bytes }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="etag">
                                        { item.etag }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="sha256">
                                        { item.sha256 }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="compression_ratio">
                                        { item.compression_ratio }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="trashed_at">
                                        { dataFormatter.dateTimeFormatter(item.trashed_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="purge_after">
                                        { dataFormatter.dateTimeFormatter(item.purge_after) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.storage_objects_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Upload_sessions 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>TotalFiles</th>
                                
                                
                                
                                <th>CompletedFiles</th>
                                
                                
                                
                                <th>FailedFiles</th>
                                
                                
                                
                                <th>StartedAt</th>
                                
                                
                                
                                <th>CompletedAt</th>
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.upload_sessions_organizations && Array.isArray(organizations.upload_sessions_organizations) &&
                              organizations.upload_sessions_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/upload_sessions/upload_sessions-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="total_files">
                                        { item.total_files }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="completed_files">
                                        { item.completed_files }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="failed_files">
                                        { item.failed_files }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="started_at">
                                        { dataFormatter.dateTimeFormatter(item.started_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="completed_at">
                                        { dataFormatter.dateTimeFormatter(item.completed_at) }
                                    </td>
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.upload_sessions_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Upload_files organizations</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>FileName</th>
                                
                                
                                
                                <th>ContentType</th>
                                
                                
                                
                                <th>SizeBytes</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                <th>ProgressPercent</th>
                                
                                
                                
                                <th>ErrorMessage</th>
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.upload_files_organizations && Array.isArray(organizations.upload_files_organizations) &&
                              organizations.upload_files_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/upload_files/upload_files-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="file_name">
                                        { item.file_name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="content_type">
                                        { item.content_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="size_bytes">
                                        { item.size_bytes }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="progress_percent">
                                        { item.progress_percent }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="error_message">
                                        { item.error_message }
                                    </td>
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.upload_files_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Tags 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>TagType</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.tags_organization && Array.isArray(organizations.tags_organization) &&
                              organizations.tags_organization.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/tags/tags-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="name">
                                        { item.name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="tag_type">
                                        { item.tag_type }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.tags_organization?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Media_ai_tags organizations</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>Confidence</th>
                                
                                
                                
                                <th>Source</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.media_ai_tags_organizations && Array.isArray(organizations.media_ai_tags_organizations) &&
                              organizations.media_ai_tags_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/media_ai_tags/media_ai_tags-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="confidence">
                                        { item.confidence }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="source">
                                        { item.source }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.media_ai_tags_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Media_user_tags organizations</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.media_user_tags_organizations && Array.isArray(organizations.media_user_tags_organizations) &&
                              organizations.media_user_tags_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/media_user_tags/media_user_tags-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.media_user_tags_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Likes organizations</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>LikedAt</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.likes_organizations && Array.isArray(organizations.likes_organizations) &&
                              organizations.likes_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/likes/likes-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="liked_at">
                                        { dataFormatter.dateTimeFormatter(item.liked_at) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.likes_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Favourites organizations</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>SavedAt</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.favourites_organizations && Array.isArray(organizations.favourites_organizations) &&
                              organizations.favourites_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/favourites/favourites-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="saved_at">
                                        { dataFormatter.dateTimeFormatter(item.saved_at) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.favourites_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Comments organizations</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                
                                
                                <th>Content</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                <th>PostedAt</th>
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.comments_organizations && Array.isArray(organizations.comments_organizations) &&
                              organizations.comments_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/comments/comments-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="content">
                                        { item.content }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="posted_at">
                                        { dataFormatter.dateTimeFormatter(item.posted_at) }
                                    </td>
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.comments_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Mentions organizations</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.mentions_organizations && Array.isArray(organizations.mentions_organizations) &&
                              organizations.mentions_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/mentions/mentions-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.mentions_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Notifications 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>Title</th>
                                
                                
                                
                                <th>Body</th>
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                <th>IsRead</th>
                                
                                
                                
                                <th>ReadAt</th>
                                
                                
                                
                                <th>SentAt</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.notifications_organizations && Array.isArray(organizations.notifications_organizations) &&
                              organizations.notifications_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/notifications/notifications-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="type">
                                        { item.type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="title">
                                        { item.title }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="body">
                                        { item.body }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="is_read">
                                        { dataFormatter.booleanFormatter(item.is_read) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="read_at">
                                        { dataFormatter.dateTimeFormatter(item.read_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="sent_at">
                                        { dataFormatter.dateTimeFormatter(item.sent_at) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.notifications_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Notification_preferences 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>LikesEnabled</th>
                                
                                
                                
                                <th>CommentsEnabled</th>
                                
                                
                                
                                <th>TagsEnabled</th>
                                
                                
                                
                                <th>MentionsEnabled</th>
                                
                                
                                
                                <th>SharesEnabled</th>
                                
                                
                                
                                <th>UploadsEnabled</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.notification_preferences_organizations && Array.isArray(organizations.notification_preferences_organizations) &&
                              organizations.notification_preferences_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/notification_preferences/notification_preferences-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="channel">
                                        { item.channel }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="likes_enabled">
                                        { dataFormatter.booleanFormatter(item.likes_enabled) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="comments_enabled">
                                        { dataFormatter.booleanFormatter(item.comments_enabled) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="tags_enabled">
                                        { dataFormatter.booleanFormatter(item.tags_enabled) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="mentions_enabled">
                                        { dataFormatter.booleanFormatter(item.mentions_enabled) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="shares_enabled">
                                        { dataFormatter.booleanFormatter(item.shares_enabled) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="uploads_enabled">
                                        { dataFormatter.booleanFormatter(item.uploads_enabled) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.notification_preferences_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Shares organizations</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>ShareType</th>
                                
                                
                                
                                <th>Token</th>
                                
                                
                                
                                <th>AccessLevel</th>
                                
                                
                                
                                <th>ExpiresAt</th>
                                
                                
                                
                                <th>MaxUses</th>
                                
                                
                                
                                <th>UsesCount</th>
                                
                                
                                
                                <th>Revoked</th>
                                
                                
                                
                                <th>RevokedAt</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.shares_organizations && Array.isArray(organizations.shares_organizations) &&
                              organizations.shares_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/shares/shares-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="share_type">
                                        { item.share_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="token">
                                        { item.token }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="access_level">
                                        { item.access_level }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="expires_at">
                                        { dataFormatter.dateTimeFormatter(item.expires_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="max_uses">
                                        { item.max_uses }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="uses_count">
                                        { item.uses_count }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="revoked">
                                        { dataFormatter.booleanFormatter(item.revoked) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="revoked_at">
                                        { dataFormatter.dateTimeFormatter(item.revoked_at) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.shares_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Download_jobs 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>WatermarkText</th>
                                
                                
                                
                                
                                
                                <th>RequestedAt</th>
                                
                                
                                
                                <th>CompletedAt</th>
                                
                                
                                
                                <th>ErrorMessage</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.download_jobs_organizations && Array.isArray(organizations.download_jobs_organizations) &&
                              organizations.download_jobs_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/download_jobs/download_jobs-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="watermark_text">
                                        { item.watermark_text }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="requested_at">
                                        { dataFormatter.dateTimeFormatter(item.requested_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="completed_at">
                                        { dataFormatter.dateTimeFormatter(item.completed_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="error_message">
                                        { item.error_message }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.download_jobs_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Watermark_profiles 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>Mode</th>
                                
                                
                                
                                
                                
                                <th>DefaultTextTemplate</th>
                                
                                
                                
                                <th>Opacity</th>
                                
                                
                                
                                <th>Position</th>
                                
                                
                                
                                <th>Scale</th>
                                
                                
                                
                                <th>Enabled</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.watermark_profiles_organization && Array.isArray(organizations.watermark_profiles_organization) &&
                              organizations.watermark_profiles_organization.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/watermark_profiles/watermark_profiles-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="name">
                                        { item.name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="mode">
                                        { item.mode }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="default_text_template">
                                        { item.default_text_template }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="opacity">
                                        { item.opacity }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="position">
                                        { item.position }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="scale">
                                        { item.scale }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="enabled">
                                        { dataFormatter.booleanFormatter(item.enabled) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.watermark_profiles_organization?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Ai_models 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>ModelType</th>
                                
                                
                                
                                <th>Provider</th>
                                
                                
                                
                                <th>Version</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.ai_models_organization && Array.isArray(organizations.ai_models_organization) &&
                              organizations.ai_models_organization.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/ai_models/ai_models-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="name">
                                        { item.name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="model_type">
                                        { item.model_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="provider">
                                        { item.provider }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="version">
                                        { item.version }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.ai_models_organization?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Ai_embeddings organizations</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>VectorRef</th>
                                
                                
                                
                                <th>Dimensions</th>
                                
                                
                                
                                <th>EmbeddingType</th>
                                
                                
                                
                                <th>QualityScore</th>
                                
                                
                                
                                <th>IndexedAt</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.ai_embeddings_organizations && Array.isArray(organizations.ai_embeddings_organizations) &&
                              organizations.ai_embeddings_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/ai_embeddings/ai_embeddings-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="vector_ref">
                                        { item.vector_ref }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="dimensions">
                                        { item.dimensions }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="embedding_type">
                                        { item.embedding_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="quality_score">
                                        { item.quality_score }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="indexed_at">
                                        { dataFormatter.dateTimeFormatter(item.indexed_at) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.ai_embeddings_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Face_detections organizations</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>BBoxX</th>
                                
                                
                                
                                <th>BBoxY</th>
                                
                                
                                
                                <th>BBoxWidth</th>
                                
                                
                                
                                <th>BBoxHeight</th>
                                
                                
                                
                                <th>Confidence</th>
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.face_detections_organizations && Array.isArray(organizations.face_detections_organizations) &&
                              organizations.face_detections_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/face_detections/face_detections-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="bbox_x">
                                        { item.bbox_x }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="bbox_y">
                                        { item.bbox_y }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="bbox_width">
                                        { item.bbox_width }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="bbox_height">
                                        { item.bbox_height }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="confidence">
                                        { item.confidence }
                                    </td>
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.face_detections_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Selfie_references 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>UploadedAt</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.selfie_references_organizations && Array.isArray(organizations.selfie_references_organizations) &&
                              organizations.selfie_references_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/selfie_references/selfie_references-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="uploaded_at">
                                        { dataFormatter.dateTimeFormatter(item.uploaded_at) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.selfie_references_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Face_matches organizations</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>MatchScore</th>
                                
                                
                                
                                <th>ConfidenceBadge</th>
                                
                                
                                
                                <th>MatchedAt</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.face_matches_organizations && Array.isArray(organizations.face_matches_organizations) &&
                              organizations.face_matches_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/face_matches/face_matches-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="match_score">
                                        { item.match_score }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="confidence_badge">
                                        { item.confidence_badge }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="matched_at">
                                        { dataFormatter.dateTimeFormatter(item.matched_at) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.face_matches_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Ai_captions organizations</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>CaptionText</th>
                                
                                
                                
                                <th>Confidence</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.ai_captions_organizations && Array.isArray(organizations.ai_captions_organizations) &&
                              organizations.ai_captions_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/ai_captions/ai_captions-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="caption_text">
                                        { item.caption_text }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="confidence">
                                        { item.confidence }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.ai_captions_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Moderation_flags organizations</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>Reason</th>
                                
                                
                                
                                <th>Details</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                
                                
                                <th>ReportedAt</th>
                                
                                
                                
                                <th>ResolvedAt</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.moderation_flags_organizations && Array.isArray(organizations.moderation_flags_organizations) &&
                              organizations.moderation_flags_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/moderation_flags/moderation_flags-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="reason">
                                        { item.reason }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="details">
                                        { item.details }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="reported_at">
                                        { dataFormatter.dateTimeFormatter(item.reported_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="resolved_at">
                                        { dataFormatter.dateTimeFormatter(item.resolved_at) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.moderation_flags_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Stories 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>Status</th>
                                
                                
                                
                                <th>StartsAt</th>
                                
                                
                                
                                <th>EndsAt</th>
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.stories_organizations && Array.isArray(organizations.stories_organizations) &&
                              organizations.stories_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/stories/stories-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="title">
                                        { item.title }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="starts_at">
                                        { dataFormatter.dateTimeFormatter(item.starts_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="ends_at">
                                        { dataFormatter.dateTimeFormatter(item.ends_at) }
                                    </td>
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.stories_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Story_items organizations</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>SortOrder</th>
                                
                                
                                
                                <th>Layout</th>
                                
                                
                                
                                <th>OverlayText</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.story_items_organizations && Array.isArray(organizations.story_items_organizations) &&
                              organizations.story_items_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/story_items/story_items-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="sort_order">
                                        { item.sort_order }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="layout">
                                        { item.layout }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="overlay_text">
                                        { item.overlay_text }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.story_items_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Analytics_events Organization</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>MetadataJSON</th>
                                
                                
                                
                                <th>OccurredAt</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.analytics_events_organization && Array.isArray(organizations.analytics_events_organization) &&
                              organizations.analytics_events_organization.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/analytics_events/analytics_events-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="event_type">
                                        { item.event_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="metadata_json">
                                        { item.metadata_json }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="occurred_at">
                                        { dataFormatter.dateTimeFormatter(item.occurred_at) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.analytics_events_organization?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Oauth_accounts organizations</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>Provider</th>
                                
                                
                                
                                <th>ProviderUserKey</th>
                                
                                
                                
                                <th>AccessToken</th>
                                
                                
                                
                                <th>RefreshToken</th>
                                
                                
                                
                                <th>TokenExpiresAt</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.oauth_accounts_organizations && Array.isArray(organizations.oauth_accounts_organizations) &&
                              organizations.oauth_accounts_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/oauth_accounts/oauth_accounts-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="provider">
                                        { item.provider }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="provider_user_key">
                                        { item.provider_user_key }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="access_token">
                                        { item.access_token }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="refresh_token">
                                        { item.refresh_token }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="token_expires_at">
                                        { dataFormatter.dateTimeFormatter(item.token_expires_at) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.oauth_accounts_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;