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'}>Teams organizations</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                <th>TeamName</th>
                                
                                
                                
                                <th>Slug</th>
                                
                                
                                
                                <th>Description</th>
                                
                                
                                
                                <th>PersonalTeam</th>
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.teams_organizations && Array.isArray(organizations.teams_organizations) &&
                              organizations.teams_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/teams/teams-view/?id=${item.id}`)}>
                                    
                                    
                                    <td data-label="name">
                                        { item.name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="slug">
                                        { item.slug }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="description">
                                        { item.description }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="is_personal">
                                        { dataFormatter.booleanFormatter(item.is_personal) }
                                    </td>
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.teams_organizations?.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>LinkedAt</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="linked_at">
                                        { dataFormatter.dateTimeFormatter(item.linked_at) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.oauth_accounts_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Integrations organizations</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>IntegrationType</th>
                                
                                
                                
                                <th>Name</th>
                                
                                
                                
                                <th>Enabled</th>
                                
                                
                                
                                <th>ConfigJSON</th>
                                
                                
                                
                                <th>ConnectedAt</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.integrations_organizations && Array.isArray(organizations.integrations_organizations) &&
                              organizations.integrations_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/integrations/integrations-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="type">
                                        { item.type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="name">
                                        { item.name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="is_enabled">
                                        { dataFormatter.booleanFormatter(item.is_enabled) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="config_json">
                                        { item.config_json }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="connected_at">
                                        { dataFormatter.dateTimeFormatter(item.connected_at) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.integrations_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>User_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>Asa</th>
                                
                                
                                
                                <th>Iwant</th>
                                
                                
                                
                                <th>Sothat</th>
                                
                                
                                
                                <th>SmartTemplate</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                <th>BoardColumn</th>
                                
                                
                                
                                <th>Priority</th>
                                
                                
                                
                                <th>QualityScore</th>
                                
                                
                                
                                <th>QualitySuggestions</th>
                                
                                
                                
                                <th>Tags(CSV)</th>
                                
                                
                                
                                
                                
                                <th>CreatedAt</th>
                                
                                
                                
                                <th>UpdatedAt</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.user_stories_organizations && Array.isArray(organizations.user_stories_organizations) &&
                              organizations.user_stories_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/user_stories/user_stories-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="title">
                                        { item.title }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="as_a">
                                        { item.as_a }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="i_want">
                                        { item.i_want }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="so_that">
                                        { item.so_that }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="template_type">
                                        { item.template_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="board_column">
                                        { item.board_column }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="priority">
                                        { item.priority }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="quality_score">
                                        { item.quality_score }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="quality_suggestions">
                                        { item.quality_suggestions }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="tags_csv">
                                        { item.tags_csv }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="created_at_time">
                                        { dataFormatter.dateTimeFormatter(item.created_at_time) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="updated_at_time">
                                        { dataFormatter.dateTimeFormatter(item.updated_at_time) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.user_stories_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Acceptance_criteria 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>Given</th>
                                
                                
                                
                                <th>When</th>
                                
                                
                                
                                <th>Then</th>
                                
                                
                                
                                <th>Automatable</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.acceptance_criteria_organizations && Array.isArray(organizations.acceptance_criteria_organizations) &&
                              organizations.acceptance_criteria_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/acceptance_criteria/acceptance_criteria-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="sort_order">
                                        { item.sort_order }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="given_text">
                                        { item.given_text }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="when_text">
                                        { item.when_text }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="then_text">
                                        { item.then_text }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="is_automatable">
                                        { dataFormatter.booleanFormatter(item.is_automatable) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.acceptance_criteria_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Documents 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>CurrentVersion</th>
                                
                                
                                
                                
                                
                                
                                
                                <th>LastEditedAt</th>
                                
                                
                                
                                <th>Archived</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.documents_organizations && Array.isArray(organizations.documents_organizations) &&
                              organizations.documents_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/documents/documents-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="title">
                                        { item.title }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="current_version_number">
                                        { item.current_version_number }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="last_edited_at">
                                        { dataFormatter.dateTimeFormatter(item.last_edited_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="is_archived">
                                        { dataFormatter.booleanFormatter(item.is_archived) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.documents_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Document_folders organizations</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>FolderName</th>
                                
                                
                                
                                
                                
                                <th>SortOrder</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.document_folders_organizations && Array.isArray(organizations.document_folders_organizations) &&
                              organizations.document_folders_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/document_folders/document_folders-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="name">
                                        { item.name }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="sort_order">
                                        { item.sort_order }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.document_folders_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Document_versions organizations</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>VersionNumber</th>
                                
                                
                                
                                
                                
                                
                                
                                <th>SavedAt</th>
                                
                                
                                
                                <th>ChangeSummary</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.document_versions_organizations && Array.isArray(organizations.document_versions_organizations) &&
                              organizations.document_versions_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/document_versions/document_versions-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="version_number">
                                        { item.version_number }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="saved_at">
                                        { dataFormatter.dateTimeFormatter(item.saved_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="change_summary">
                                        { item.change_summary }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.document_versions_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Story_document_links organizations</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>LinkType</th>
                                
                                
                                
                                <th>LinkedAt</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.story_document_links_organizations && Array.isArray(organizations.story_document_links_organizations) &&
                              organizations.story_document_links_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/story_document_links/story_document_links-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="link_type">
                                        { item.link_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="linked_at">
                                        { dataFormatter.dateTimeFormatter(item.linked_at) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.story_document_links_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Collaboration_sessions organizations</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>SessionType</th>
                                
                                
                                
                                <th>ChannelKey</th>
                                
                                
                                
                                <th>StartedAt</th>
                                
                                
                                
                                <th>EndedAt</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.collaboration_sessions_organizations && Array.isArray(organizations.collaboration_sessions_organizations) &&
                              organizations.collaboration_sessions_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/collaboration_sessions/collaboration_sessions-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="session_type">
                                        { item.session_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="channel_key">
                                        { item.channel_key }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="started_at">
                                        { dataFormatter.dateTimeFormatter(item.started_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="ended_at">
                                        { dataFormatter.dateTimeFormatter(item.ended_at) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.collaboration_sessions_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Comment_threads organizations</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                
                                
                                <th>AnchorKey</th>
                                
                                
                                
                                <th>AnchorExcerpt</th>
                                
                                
                                
                                <th>Resolved</th>
                                
                                
                                
                                <th>OpenedAt</th>
                                
                                
                                
                                <th>ResolvedAt</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.comment_threads_organizations && Array.isArray(organizations.comment_threads_organizations) &&
                              organizations.comment_threads_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/comment_threads/comment_threads-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="anchor_key">
                                        { item.anchor_key }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="anchor_excerpt">
                                        { item.anchor_excerpt }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="is_resolved">
                                        { dataFormatter.booleanFormatter(item.is_resolved) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="opened_at">
                                        { dataFormatter.dateTimeFormatter(item.opened_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="resolved_at">
                                        { dataFormatter.dateTimeFormatter(item.resolved_at) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.comment_threads_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>PostedAt</th>
                                
                                
                                
                                <th>Edited</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="posted_at">
                                        { dataFormatter.dateTimeFormatter(item.posted_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="is_edited">
                                        { dataFormatter.booleanFormatter(item.is_edited) }
                                    </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'}>Comment_reactions organizations</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>Emoji</th>
                                
                                
                                
                                <th>ReactedAt</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.comment_reactions_organizations && Array.isArray(organizations.comment_reactions_organizations) &&
                              organizations.comment_reactions_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/comment_reactions/comment_reactions-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="emoji">
                                        { item.emoji }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="reacted_at">
                                        { dataFormatter.dateTimeFormatter(item.reacted_at) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.comment_reactions_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>
                                
                                
                                
                                
                                
                                
                                <th>MentionedAt</th>
                                
                                
                            </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}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="mentioned_at">
                                        { dataFormatter.dateTimeFormatter(item.mentioned_at) }
                                    </td>
                                    
                                    
                                </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'}>Approval_workflows organizations</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>WorkflowName</th>
                                
                                
                                
                                <th>AppliesTo</th>
                                
                                
                                
                                <th>Active</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.approval_workflows_organizations && Array.isArray(organizations.approval_workflows_organizations) &&
                              organizations.approval_workflows_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/approval_workflows/approval_workflows-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="name">
                                        { item.name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="applies_to">
                                        { item.applies_to }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="is_active">
                                        { dataFormatter.booleanFormatter(item.is_active) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.approval_workflows_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Approvals 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>RequestedAt</th>
                                
                                
                                
                                <th>CompletedAt</th>
                                
                                
                                
                                
                                
                                <th>Notes</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.approvals_organizations && Array.isArray(organizations.approvals_organizations) &&
                              organizations.approvals_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/approvals/approvals-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </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="notes">
                                        { item.notes }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.approvals_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Approval_reviewers organizations</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>Decision</th>
                                
                                
                                
                                <th>DecidedAt</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.approval_reviewers_organizations && Array.isArray(organizations.approval_reviewers_organizations) &&
                              organizations.approval_reviewers_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/approval_reviewers/approval_reviewers-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="decision">
                                        { item.decision }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="decided_at">
                                        { dataFormatter.dateTimeFormatter(item.decided_at) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.approval_reviewers_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Audit_events organizations</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>EntityType</th>
                                
                                
                                
                                <th>EntityKey</th>
                                
                                
                                
                                <th>Action</th>
                                
                                
                                
                                <th>MetadataJSON</th>
                                
                                
                                
                                <th>OccurredAt</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.audit_events_organizations && Array.isArray(organizations.audit_events_organizations) &&
                              organizations.audit_events_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/audit_events/audit_events-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="entity_type">
                                        { item.entity_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="entity_key">
                                        { item.entity_key }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="action">
                                        { item.action }
                                    </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?.audit_events_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>Message</th>
                                
                                
                                
                                <th>LinkPath</th>
                                
                                
                                
                                <th>Read</th>
                                
                                
                                
                                <th>SentAt</th>
                                
                                
                                
                                <th>ReadAt</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="message">
                                        { item.message }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="link_path">
                                        { item.link_path }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="is_read">
                                        { dataFormatter.booleanFormatter(item.is_read) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="sent_at">
                                        { dataFormatter.dateTimeFormatter(item.sent_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="read_at">
                                        { dataFormatter.dateTimeFormatter(item.read_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'}>Sprints organizations</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>SprintName</th>
                                
                                
                                
                                <th>StartAt</th>
                                
                                
                                
                                <th>EndAt</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                <th>PlannedVelocity</th>
                                
                                
                                
                                <th>ActualVelocity</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.sprints_organizations && Array.isArray(organizations.sprints_organizations) &&
                              organizations.sprints_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/sprints/sprints-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="name">
                                        { item.name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="start_at">
                                        { dataFormatter.dateTimeFormatter(item.start_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="end_at">
                                        { dataFormatter.dateTimeFormatter(item.end_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="planned_velocity">
                                        { item.planned_velocity }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="actual_velocity">
                                        { item.actual_velocity }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.sprints_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Sprint_items organizations</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>State</th>
                                
                                
                                
                                <th>StoryPoints</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.sprint_items_organizations && Array.isArray(organizations.sprint_items_organizations) &&
                              organizations.sprint_items_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/sprint_items/sprint_items-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="state">
                                        { item.state }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="story_points">
                                        { item.story_points }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.sprint_items_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Blockers 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>Description</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                
                                
                                
                                
                                <th>ReportedAt</th>
                                
                                
                                
                                <th>ResolvedAt</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.blockers_organizations && Array.isArray(organizations.blockers_organizations) &&
                              organizations.blockers_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/blockers/blockers-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="title">
                                        { item.title }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="description">
                                        { item.description }
                                    </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?.blockers_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Activity_feed_items organizations</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>Category</th>
                                
                                
                                
                                <th>Summary</th>
                                
                                
                                
                                <th>LinkPath</th>
                                
                                
                                
                                <th>HappenedAt</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.activity_feed_items_organizations && Array.isArray(organizations.activity_feed_items_organizations) &&
                              organizations.activity_feed_items_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/activity_feed_items/activity_feed_items-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="category">
                                        { item.category }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="summary">
                                        { item.summary }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="link_path">
                                        { item.link_path }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="happened_at">
                                        { dataFormatter.dateTimeFormatter(item.happened_at) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.activity_feed_items_organizations?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Ai_generations organizations</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>GenerationType</th>
                                
                                
                                
                                <th>InputText</th>
                                
                                
                                
                                <th>OutputJSON</th>
                                
                                
                                
                                <th>EstimatedCost</th>
                                
                                
                                
                                <th>RequestedAt</th>
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {organizations.ai_generations_organizations && Array.isArray(organizations.ai_generations_organizations) &&
                              organizations.ai_generations_organizations.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/ai_generations/ai_generations-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="generation_type">
                                        { item.generation_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="input_text">
                                        { item.input_text }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="output_json">
                                        { item.output_json }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="estimated_cost">
                                        { item.estimated_cost }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="requested_at">
                                        { dataFormatter.dateTimeFormatter(item.requested_at) }
                                    </td>
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!organizations?.ai_generations_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;