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/users/usersSlice'
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 UsersView = () => {
    const router = useRouter()
    const dispatch = useAppDispatch()
    const { users } = useAppSelector((state) => state.users)
    
    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 users')}</title>
          </Head>
          <SectionMain>
            <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={removeLastCharacter('View users')} main>
                <BaseButton
                  color='info'
                  label='Edit'
                  href={`/users/users-edit/?id=${id}`}
                />
            </SectionTitleLineWithButton>
            <CardBox>
            

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

              

              

              

              

              

              

              

              

              

              

              

              
              

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

              

              

              

              

              

              

              

              

              

              

              

              
              

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>Phone Number</p>
                    <p>{users?.phoneNumber}</p>
                </div>
              

              

              

              

              

              

              

              

              

              

              

              

              
              

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>E-Mail</p>
                    <p>{users?.email}</p>
                </div>
              

              

              

              

              

              

              

              

              

              

              

              

              
              

              

              

              

              

              

              

              

              

              
                <FormField label='Disabled'>
                    <SwitchField
                      field={{name: 'disabled', value: users?.disabled}}
                      form={{setFieldValue: () => null}}
                      disabled
                    />
                </FormField>
              

              

              

              

              
              

              

              

              

              

              

              

              

              

              

              

              

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>Avatar</p>
                    {users?.avatar?.length
                      ? (
                        <ImageField
                          name={'avatar'}
                          image={users?.avatar}
                          className='w-20 h-20'
                        />
                      ) : <p>No Avatar</p>
                    }
                </div>
              

              
              

              

              

              

              

              

              

              

              

              

              
              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>App Role</p>
                    
                    
                    
                    
                        <p>{users?.app_role?.name ?? 'No data'}</p>
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                </div>
                 
              

              

              

              
              

              

              

              

              

              

              

              

              

              

              

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

              

              
              

              

              

              

              

              

              

              

              

              

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

              

              

              
              

                
                
                
                
                
                
                <>
                    <p className={'block font-bold mb-2'}>Identity_verifications User</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>VerificationType</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                <th>SubmittedAt</th>
                                
                                
                                
                                <th>ReviewedAt</th>
                                
                                
                                
                                <th>ExpiresAt</th>
                                
                                
                                
                                <th>DocumentNumber</th>
                                
                                
                                
                                
                                
                                
                                
                                <th>MatchConfidence</th>
                                
                                
                                
                                <th>ReviewNotes</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {users.identity_verifications_user && Array.isArray(users.identity_verifications_user) &&
                              users.identity_verifications_user.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/identity_verifications/identity_verifications-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="verification_type">
                                        { item.verification_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="submitted_at">
                                        { dataFormatter.dateTimeFormatter(item.submitted_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="reviewed_at">
                                        { dataFormatter.dateTimeFormatter(item.reviewed_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="expires_at">
                                        { dataFormatter.dateTimeFormatter(item.expires_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="document_number">
                                        { item.document_number }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="match_confidence">
                                        { item.match_confidence }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="review_notes">
                                        { item.review_notes }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!users?.identity_verifications_user?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Wallets Owner</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>WalletCode</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                <th>AvailableBalance</th>
                                
                                
                                
                                <th>PendingBalance</th>
                                
                                
                                
                                <th>Currency</th>
                                
                                
                                
                                <th>OpenedAt</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {users.wallets_owner && Array.isArray(users.wallets_owner) &&
                              users.wallets_owner.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/wallets/wallets-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="wallet_code">
                                        { item.wallet_code }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="available_balance">
                                        { item.available_balance }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="pending_balance">
                                        { item.pending_balance }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="currency">
                                        { item.currency }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="opened_at">
                                        { dataFormatter.dateTimeFormatter(item.opened_at) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!users?.wallets_owner?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                
                
                <>
                    <p className={'block font-bold mb-2'}>Chat_participants User</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>JoinedAt</th>
                                
                                
                                
                                <th>IsMuted</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {users.chat_participants_user && Array.isArray(users.chat_participants_user) &&
                              users.chat_participants_user.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/chat_participants/chat_participants-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="role">
                                        { item.role }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="joined_at">
                                        { dataFormatter.dateTimeFormatter(item.joined_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="is_muted">
                                        { dataFormatter.booleanFormatter(item.is_muted) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!users?.chat_participants_user?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Messages Sender</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>MessageType</th>
                                
                                
                                
                                <th>TextBody</th>
                                
                                
                                
                                
                                
                                
                                
                                <th>LinkURL</th>
                                
                                
                                
                                <th>SentAt</th>
                                
                                
                                
                                <th>ReadAt</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {users.messages_sender && Array.isArray(users.messages_sender) &&
                              users.messages_sender.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/messages/messages-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="message_type">
                                        { item.message_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="text_body">
                                        { item.text_body }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="link_url">
                                        { item.link_url }
                                    </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>
                        {!users?.messages_sender?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Stores Owner</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>StoreName</th>
                                
                                
                                
                                <th>StoreSlug</th>
                                
                                
                                
                                <th>StoreType</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                
                                
                                
                                
                                <th>SupportPhone</th>
                                
                                
                                
                                <th>SupportEmail</th>
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {users.stores_owner && Array.isArray(users.stores_owner) &&
                              users.stores_owner.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/stores/stores-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="store_name">
                                        { item.store_name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="store_slug">
                                        { item.store_slug }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="store_type">
                                        { item.store_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="support_phone">
                                        { item.support_phone }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="support_email">
                                        { item.support_email }
                                    </td>
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!users?.stores_owner?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Addresses User</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>Label</th>
                                
                                
                                
                                <th>RecipientName</th>
                                
                                
                                
                                <th>PhoneNumber</th>
                                
                                
                                
                                <th>Country</th>
                                
                                
                                
                                <th>Province</th>
                                
                                
                                
                                <th>City</th>
                                
                                
                                
                                <th>District</th>
                                
                                
                                
                                <th>PostalCode</th>
                                
                                
                                
                                <th>StreetAddress</th>
                                
                                
                                
                                <th>Latitude</th>
                                
                                
                                
                                <th>Longitude</th>
                                
                                
                                
                                <th>IsDefault</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {users.addresses_user && Array.isArray(users.addresses_user) &&
                              users.addresses_user.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/addresses/addresses-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="label">
                                        { item.label }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="recipient_name">
                                        { item.recipient_name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="phone_number">
                                        { item.phone_number }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="country">
                                        { item.country }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="province">
                                        { item.province }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="city">
                                        { item.city }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="district">
                                        { item.district }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="postal_code">
                                        { item.postal_code }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="street_address">
                                        { item.street_address }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="latitude">
                                        { item.latitude }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="longitude">
                                        { item.longitude }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="is_default">
                                        { dataFormatter.booleanFormatter(item.is_default) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!users?.addresses_user?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                
                
                <>
                    <p className={'block font-bold mb-2'}>Orders Buyer</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>OrderNumber</th>
                                
                                
                                
                                <th>OrderStatus</th>
                                
                                
                                
                                <th>SubtotalAmount</th>
                                
                                
                                
                                <th>ShippingAmount</th>
                                
                                
                                
                                <th>TotalAmount</th>
                                
                                
                                
                                
                                
                                <th>PlacedAt</th>
                                
                                
                                
                                <th>PaidAt</th>
                                
                                
                                
                                <th>BuyerNote</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {users.orders_buyer && Array.isArray(users.orders_buyer) &&
                              users.orders_buyer.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/orders/orders-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="order_number">
                                        { item.order_number }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="order_status">
                                        { item.order_status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="subtotal_amount">
                                        { item.subtotal_amount }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="shipping_amount">
                                        { item.shipping_amount }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="total_amount">
                                        { item.total_amount }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="placed_at">
                                        { dataFormatter.dateTimeFormatter(item.placed_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="paid_at">
                                        { dataFormatter.dateTimeFormatter(item.paid_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="buyer_note">
                                        { item.buyer_note }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!users?.orders_buyer?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                
                <>
                    <p className={'block font-bold mb-2'}>Payments Payer</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                
                                
                                <th>PaymentReference</th>
                                
                                
                                
                                <th>Method</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                <th>Amount</th>
                                
                                
                                
                                <th>InitiatedAt</th>
                                
                                
                                
                                <th>CapturedAt</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {users.payments_payer && Array.isArray(users.payments_payer) &&
                              users.payments_payer.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/payments/payments-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="payment_reference">
                                        { item.payment_reference }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="method">
                                        { item.method }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="amount">
                                        { item.amount }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="initiated_at">
                                        { dataFormatter.dateTimeFormatter(item.initiated_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="captured_at">
                                        { dataFormatter.dateTimeFormatter(item.captured_at) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!users?.payments_payer?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Product_reviews Buyer</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                
                                
                                <th>Rating</th>
                                
                                
                                
                                <th>ReviewText</th>
                                
                                
                                
                                
                                
                                <th>ModerationStatus</th>
                                
                                
                                
                                <th>ReviewedAt</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {users.product_reviews_buyer && Array.isArray(users.product_reviews_buyer) &&
                              users.product_reviews_buyer.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/product_reviews/product_reviews-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="rating">
                                        { item.rating }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="review_text">
                                        { item.review_text }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="moderation_status">
                                        { item.moderation_status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="reviewed_at">
                                        { dataFormatter.dateTimeFormatter(item.reviewed_at) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!users?.product_reviews_buyer?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                
                <>
                    <p className={'block font-bold mb-2'}>Posts Author</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>PostType</th>
                                
                                
                                
                                <th>Caption</th>
                                
                                
                                
                                
                                
                                
                                
                                <th>Visibility</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                <th>PublishedAt</th>
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {users.posts_author && Array.isArray(users.posts_author) &&
                              users.posts_author.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/posts/posts-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="post_type">
                                        { item.post_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="caption">
                                        { item.caption }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="visibility">
                                        { item.visibility }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="published_at">
                                        { dataFormatter.dateTimeFormatter(item.published_at) }
                                    </td>
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!users?.posts_author?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Deep_dive_links Creator</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>Summary</th>
                                
                                
                                
                                
                                
                                
                                
                                <th>ValidationStatus</th>
                                
                                
                                
                                <th>AIConfidence</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {users.deep_dive_links_creator && Array.isArray(users.deep_dive_links_creator) &&
                              users.deep_dive_links_creator.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/deep_dive_links/deep_dive_links-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="title_text">
                                        { item.title_text }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="summary">
                                        { item.summary }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="validation_status">
                                        { item.validation_status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="ai_confidence">
                                        { item.ai_confidence }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!users?.deep_dive_links_creator?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                
                <>
                    <p className={'block font-bold mb-2'}>Post_engagements User</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>EngagementType</th>
                                
                                
                                
                                <th>CommentText</th>
                                
                                
                                
                                <th>EngagedAt</th>
                                
                                
                                
                                <th>IsRewardEligible</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {users.post_engagements_user && Array.isArray(users.post_engagements_user) &&
                              users.post_engagements_user.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/post_engagements/post_engagements-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="engagement_type">
                                        { item.engagement_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="comment_text">
                                        { item.comment_text }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="engaged_at">
                                        { dataFormatter.dateTimeFormatter(item.engaged_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="is_reward_eligible">
                                        { dataFormatter.booleanFormatter(item.is_reward_eligible) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!users?.post_engagements_user?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Rewards User</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>RewardType</th>
                                
                                
                                
                                <th>PointsAmount</th>
                                
                                
                                
                                <th>CashValueAmount</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                <th>AwardedAt</th>
                                
                                
                                
                                <th>ExpiresAt</th>
                                
                                
                                
                                <th>ReasonNote</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {users.rewards_user && Array.isArray(users.rewards_user) &&
                              users.rewards_user.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/rewards/rewards-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="reward_type">
                                        { item.reward_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="points_amount">
                                        { item.points_amount }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="cash_value_amount">
                                        { item.cash_value_amount }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="awarded_at">
                                        { dataFormatter.dateTimeFormatter(item.awarded_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="expires_at">
                                        { dataFormatter.dateTimeFormatter(item.expires_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="reason_note">
                                        { item.reason_note }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!users?.rewards_user?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Forum_spaces Owner</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                <th>SpaceName</th>
                                
                                
                                
                                <th>Description</th>
                                
                                
                                
                                <th>CenterLatitude</th>
                                
                                
                                
                                <th>CenterLongitude</th>
                                
                                
                                
                                <th>RadiusMeters</th>
                                
                                
                                
                                <th>MinTrustScoreToPost</th>
                                
                                
                                
                                <th>Visibility</th>
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {users.forum_spaces_owner && Array.isArray(users.forum_spaces_owner) &&
                              users.forum_spaces_owner.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/forum_spaces/forum_spaces-view/?id=${item.id}`)}>
                                    
                                    
                                    <td data-label="space_name">
                                        { item.space_name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="description">
                                        { item.description }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="center_latitude">
                                        { item.center_latitude }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="center_longitude">
                                        { item.center_longitude }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="radius_meters">
                                        { item.radius_meters }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="min_trust_score_to_post">
                                        { item.min_trust_score_to_post }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="visibility">
                                        { item.visibility }
                                    </td>
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!users?.forum_spaces_owner?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Forum_threads Author</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>ThreadTitle</th>
                                
                                
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                <th>CreatedOn</th>
                                
                                
                                
                                <th>LastActivityAt</th>
                                
                                
                                
                                <th>UpvotesCount</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {users.forum_threads_author && Array.isArray(users.forum_threads_author) &&
                              users.forum_threads_author.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/forum_threads/forum_threads-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="thread_title">
                                        { item.thread_title }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="created_on">
                                        { dataFormatter.dateTimeFormatter(item.created_on) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="last_activity_at">
                                        { dataFormatter.dateTimeFormatter(item.last_activity_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="upvotes_count">
                                        { item.upvotes_count }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!users?.forum_threads_author?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Forum_posts Author</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>PostedAt</th>
                                
                                
                                
                                <th>UpvotesCount</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {users.forum_posts_author && Array.isArray(users.forum_posts_author) &&
                              users.forum_posts_author.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/forum_posts/forum_posts-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="posted_at">
                                        { dataFormatter.dateTimeFormatter(item.posted_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="upvotes_count">
                                        { item.upvotes_count }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!users?.forum_posts_author?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Job_companies Owner</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>CompanyName</th>
                                
                                
                                
                                <th>CompanyLegalName</th>
                                
                                
                                
                                <th>CompanyWebsite</th>
                                
                                
                                
                                <th>CompanySize</th>
                                
                                
                                
                                <th>VerificationStatus</th>
                                
                                
                                
                                
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {users.job_companies_owner && Array.isArray(users.job_companies_owner) &&
                              users.job_companies_owner.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/job_companies/job_companies-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="company_name">
                                        { item.company_name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="company_legal_name">
                                        { item.company_legal_name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="company_website">
                                        { item.company_website }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="company_size">
                                        { item.company_size }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="verification_status">
                                        { item.verification_status }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!users?.job_companies_owner?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                
                <>
                    <p className={'block font-bold mb-2'}>Job_applications Applicant</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>AppliedAt</th>
                                
                                
                                
                                <th>LastUpdatedAt</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {users.job_applications_applicant && Array.isArray(users.job_applications_applicant) &&
                              users.job_applications_applicant.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/job_applications/job_applications-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="applied_at">
                                        { dataFormatter.dateTimeFormatter(item.applied_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="last_updated_at">
                                        { dataFormatter.dateTimeFormatter(item.last_updated_at) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!users?.job_applications_applicant?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>User_credentials User</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>CredentialType</th>
                                
                                
                                
                                <th>Title</th>
                                
                                
                                
                                <th>IssuerName</th>
                                
                                
                                
                                <th>IssuedAt</th>
                                
                                
                                
                                <th>ValidUntil</th>
                                
                                
                                
                                
                                
                                <th>VerificationStatus</th>
                                
                                
                                
                                <th>Notes</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {users.user_credentials_user && Array.isArray(users.user_credentials_user) &&
                              users.user_credentials_user.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/user_credentials/user_credentials-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="credential_type">
                                        { item.credential_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="title_text">
                                        { item.title_text }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="issuer_name">
                                        { item.issuer_name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="issued_at">
                                        { dataFormatter.dateTimeFormatter(item.issued_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="valid_until">
                                        { dataFormatter.dateTimeFormatter(item.valid_until) }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="verification_status">
                                        { item.verification_status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="notes">
                                        { item.notes }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!users?.user_credentials_user?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                
                <>
                    <p className={'block font-bold mb-2'}>Affiliate_memberships Member</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>AppliedAt</th>
                                
                                
                                
                                <th>ApprovedAt</th>
                                
                                
                                
                                <th>ReferralCode</th>
                                
                                
                                
                                <th>Notes</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {users.affiliate_memberships_member && Array.isArray(users.affiliate_memberships_member) &&
                              users.affiliate_memberships_member.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/affiliate_memberships/affiliate_memberships-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="applied_at">
                                        { dataFormatter.dateTimeFormatter(item.applied_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="approved_at">
                                        { dataFormatter.dateTimeFormatter(item.approved_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="referral_code">
                                        { item.referral_code }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="notes">
                                        { item.notes }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!users?.affiliate_memberships_member?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                
                
                <>
                    <p className={'block font-bold mb-2'}>Facta_queries User</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>QueryText</th>
                                
                                
                                
                                <th>Mode</th>
                                
                                
                                
                                <th>Sensitivity</th>
                                
                                
                                
                                <th>QueriedAt</th>
                                
                                
                                
                                <th>IsHistorySaved</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {users.facta_queries_user && Array.isArray(users.facta_queries_user) &&
                              users.facta_queries_user.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/facta_queries/facta_queries-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="query_text">
                                        { item.query_text }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="mode">
                                        { item.mode }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="sensitivity">
                                        { item.sensitivity }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="queried_at">
                                        { dataFormatter.dateTimeFormatter(item.queried_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="is_history_saved">
                                        { dataFormatter.booleanFormatter(item.is_history_saved) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!users?.facta_queries_user?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                
                <>
                    <p className={'block font-bold mb-2'}>Subscriptions User</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>Plan</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                <th>StartedAt</th>
                                
                                
                                
                                <th>RenewsAt</th>
                                
                                
                                
                                <th>EndedAt</th>
                                
                                
                                
                                <th>PriceAmount</th>
                                
                                
                                
                                <th>BillingCycle</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {users.subscriptions_user && Array.isArray(users.subscriptions_user) &&
                              users.subscriptions_user.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/subscriptions/subscriptions-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="plan">
                                        { item.plan }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="started_at">
                                        { dataFormatter.dateTimeFormatter(item.started_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="renews_at">
                                        { dataFormatter.dateTimeFormatter(item.renews_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="ended_at">
                                        { dataFormatter.dateTimeFormatter(item.ended_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="price_amount">
                                        { item.price_amount }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="billing_cycle">
                                        { item.billing_cycle }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!users?.subscriptions_user?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                
                <>
                    <p className={'block font-bold mb-2'}>Audit_events Actor</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>EntityName</th>
                                
                                
                                
                                <th>EntityKey</th>
                                
                                
                                
                                <th>IPAddress</th>
                                
                                
                                
                                <th>UserAgent</th>
                                
                                
                                
                                <th>OccurredAt</th>
                                
                                
                                
                                <th>DetailsJSON</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {users.audit_events_actor && Array.isArray(users.audit_events_actor) &&
                              users.audit_events_actor.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/audit_events/audit_events-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="event_type">
                                        { item.event_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="entity_name">
                                        { item.entity_name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="entity_key">
                                        { item.entity_key }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="ip_address">
                                        { item.ip_address }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="user_agent">
                                        { item.user_agent }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="occurred_at">
                                        { dataFormatter.dateTimeFormatter(item.occurred_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="details_json">
                                        { item.details_json }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!users?.audit_events_actor?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                

                <BaseDivider />

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

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

export default UsersView;