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";


const UsersView = () => {
    const router = useRouter()
    const dispatch = useAppDispatch()
    const { users } = useAppSelector((state) => state.users)
    

    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>
                </>
              

              

              
              

                
                
                
                
                <>
                    <p className={'block font-bold mb-2'}>User_photos User</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>SortOrder</th>
                                
                                
                                
                                <th>IsActive</th>
                                
                                
                                
                                <th>UploadedAt</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {users.user_photos_user && Array.isArray(users.user_photos_user) &&
                              users.user_photos_user.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/user_photos/user_photos-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="sort_order">
                                        { item.sort_order }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="is_active">
                                        { dataFormatter.booleanFormatter(item.is_active) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="uploaded_at">
                                        { dataFormatter.dateTimeFormatter(item.uploaded_at) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!users?.user_photos_user?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                
                <>
                    <p className={'block font-bold mb-2'}>User_languages User</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>Proficiency</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {users.user_languages_user && Array.isArray(users.user_languages_user) &&
                              users.user_languages_user.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/user_languages/user_languages-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="proficiency">
                                        { item.proficiency }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!users?.user_languages_user?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                
                <>
                    <p className={'block font-bold mb-2'}>User_interests User</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {users.user_interests_user && Array.isArray(users.user_interests_user) &&
                              users.user_interests_user.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/user_interests/user_interests-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!users?.user_interests_user?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Discovery_preferences User</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>MinimumAge</th>
                                
                                
                                
                                <th>MaximumAge</th>
                                
                                
                                
                                <th>MaximumDistance(km)</th>
                                
                                
                                
                                <th>MinimumHeight(cm)</th>
                                
                                
                                
                                <th>MaximumHeight(cm)</th>
                                
                                
                                
                                <th>DatingIntention</th>
                                
                                
                                
                                <th>PreferredGender</th>
                                
                                
                                
                                <th>VerifiedOnly</th>
                                
                                
                                
                                <th>OnlineOnly</th>
                                
                                
                                
                                <th>AdvancedFiltersEnabled</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {users.discovery_preferences_user && Array.isArray(users.discovery_preferences_user) &&
                              users.discovery_preferences_user.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/discovery_preferences/discovery_preferences-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="min_age">
                                        { item.min_age }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="max_age">
                                        { item.max_age }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="max_distance_km">
                                        { item.max_distance_km }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="min_height_cm">
                                        { item.min_height_cm }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="max_height_cm">
                                        { item.max_height_cm }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="dating_intention">
                                        { item.dating_intention }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="preferred_gender">
                                        { item.preferred_gender }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="verified_only">
                                        { dataFormatter.booleanFormatter(item.verified_only) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="online_only">
                                        { dataFormatter.booleanFormatter(item.online_only) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="advanced_filters_enabled">
                                        { dataFormatter.booleanFormatter(item.advanced_filters_enabled) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!users?.discovery_preferences_user?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Swipes FromUser</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>Action</th>
                                
                                
                                
                                <th>ActedAt</th>
                                
                                
                                
                                <th>Source</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {users.swipes_from_user && Array.isArray(users.swipes_from_user) &&
                              users.swipes_from_user.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/swipes/swipes-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="action">
                                        { item.action }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="acted_at">
                                        { dataFormatter.dateTimeFormatter(item.acted_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="source">
                                        { item.source }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!users?.swipes_from_user?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                <>
                    <p className={'block font-bold mb-2'}>Swipes ToUser</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>Action</th>
                                
                                
                                
                                <th>ActedAt</th>
                                
                                
                                
                                <th>Source</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {users.swipes_to_user && Array.isArray(users.swipes_to_user) &&
                              users.swipes_to_user.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/swipes/swipes-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="action">
                                        { item.action }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="acted_at">
                                        { dataFormatter.dateTimeFormatter(item.acted_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="source">
                                        { item.source }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!users?.swipes_to_user?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Matches UserA</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>MatchedAt</th>
                                
                                
                                
                                <th>IsActive</th>
                                
                                
                                
                                <th>LastMessageAt</th>
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {users.matches_user_a && Array.isArray(users.matches_user_a) &&
                              users.matches_user_a.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/matches/matches-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="matched_at">
                                        { dataFormatter.dateTimeFormatter(item.matched_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="is_active">
                                        { dataFormatter.booleanFormatter(item.is_active) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="last_message_at">
                                        { dataFormatter.dateTimeFormatter(item.last_message_at) }
                                    </td>
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!users?.matches_user_a?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                <>
                    <p className={'block font-bold mb-2'}>Matches UserB</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>MatchedAt</th>
                                
                                
                                
                                <th>IsActive</th>
                                
                                
                                
                                <th>LastMessageAt</th>
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {users.matches_user_b && Array.isArray(users.matches_user_b) &&
                              users.matches_user_b.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/matches/matches-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="matched_at">
                                        { dataFormatter.dateTimeFormatter(item.matched_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="is_active">
                                        { dataFormatter.booleanFormatter(item.is_active) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="last_message_at">
                                        { dataFormatter.dateTimeFormatter(item.last_message_at) }
                                    </td>
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!users?.matches_user_b?.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>Body</th>
                                
                                
                                
                                
                                
                                
                                
                                <th>SentAt</th>
                                
                                
                                
                                <th>DeliveredAt</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="body">
                                        { item.body }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="sent_at">
                                        { dataFormatter.dateTimeFormatter(item.sent_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="delivered_at">
                                        { dataFormatter.dateTimeFormatter(item.delivered_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'}>Chat_events User</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>EventAt</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {users.chat_events_user && Array.isArray(users.chat_events_user) &&
                              users.chat_events_user.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/chat_events/chat_events-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="event_type">
                                        { item.event_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="event_at">
                                        { dataFormatter.dateTimeFormatter(item.event_at) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!users?.chat_events_user?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Blocks Blocker</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>Reason</th>
                                
                                
                                
                                <th>BlockedAt</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {users.blocks_blocker && Array.isArray(users.blocks_blocker) &&
                              users.blocks_blocker.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/blocks/blocks-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="reason">
                                        { item.reason }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="blocked_at">
                                        { dataFormatter.dateTimeFormatter(item.blocked_at) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!users?.blocks_blocker?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                <>
                    <p className={'block font-bold mb-2'}>Blocks BlockedUser</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>Reason</th>
                                
                                
                                
                                <th>BlockedAt</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {users.blocks_blocked && Array.isArray(users.blocks_blocked) &&
                              users.blocks_blocked.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/blocks/blocks-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="reason">
                                        { item.reason }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="blocked_at">
                                        { dataFormatter.dateTimeFormatter(item.blocked_at) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!users?.blocks_blocked?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Reports Reporter</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>ReportType</th>
                                
                                
                                
                                <th>Details</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                
                                
                                <th>ReportedAt</th>
                                
                                
                                
                                <th>ResolvedAt</th>
                                
                                
                                
                                <th>ResolutionNotes</th>
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {users.reports_reporter && Array.isArray(users.reports_reporter) &&
                              users.reports_reporter.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/reports/reports-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="report_type">
                                        { item.report_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="details">
                                        { item.details }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="reported_at">
                                        { dataFormatter.dateTimeFormatter(item.reported_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="resolved_at">
                                        { dataFormatter.dateTimeFormatter(item.resolved_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="resolution_notes">
                                        { item.resolution_notes }
                                    </td>
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!users?.reports_reporter?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                <>
                    <p className={'block font-bold mb-2'}>Reports ReportedUser</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>ReportType</th>
                                
                                
                                
                                <th>Details</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                
                                
                                <th>ReportedAt</th>
                                
                                
                                
                                <th>ResolvedAt</th>
                                
                                
                                
                                <th>ResolutionNotes</th>
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {users.reports_reported_user && Array.isArray(users.reports_reported_user) &&
                              users.reports_reported_user.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/reports/reports-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="report_type">
                                        { item.report_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="details">
                                        { item.details }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="reported_at">
                                        { dataFormatter.dateTimeFormatter(item.reported_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="resolved_at">
                                        { dataFormatter.dateTimeFormatter(item.resolved_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="resolution_notes">
                                        { item.resolution_notes }
                                    </td>
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!users?.reports_reported_user?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                
                <>
                    <p className={'block font-bold mb-2'}>Notifications User</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>NotificationType</th>
                                
                                
                                
                                <th>Title</th>
                                
                                
                                
                                <th>Body</th>
                                
                                
                                
                                <th>IsRead</th>
                                
                                
                                
                                <th>SentAt</th>
                                
                                
                                
                                <th>ReadAt</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {users.notifications_user && Array.isArray(users.notifications_user) &&
                              users.notifications_user.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/notifications/notifications-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="notification_type">
                                        { item.notification_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="title">
                                        { item.title }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="body">
                                        { item.body }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="is_read">
                                        { dataFormatter.booleanFormatter(item.is_read) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="sent_at">
                                        { dataFormatter.dateTimeFormatter(item.sent_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="read_at">
                                        { dataFormatter.dateTimeFormatter(item.read_at) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!users?.notifications_user?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Daily_sparks User</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>SparkDate</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                <th>GenerationModel</th>
                                
                                
                                
                                <th>GenerationCost</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {users.daily_sparks_user && Array.isArray(users.daily_sparks_user) &&
                              users.daily_sparks_user.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/daily_sparks/daily_sparks-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="spark_date">
                                        { dataFormatter.dateTimeFormatter(item.spark_date) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="generation_model">
                                        { item.generation_model }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="generation_cost">
                                        { item.generation_cost }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!users?.daily_sparks_user?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Daily_spark_recommendations RecommendedUser</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>Rank</th>
                                
                                
                                
                                <th>Reason</th>
                                
                                
                                
                                <th>ShownAt</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {users.daily_spark_recommendations_recommended_user && Array.isArray(users.daily_spark_recommendations_recommended_user) &&
                              users.daily_spark_recommendations_recommended_user.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/daily_spark_recommendations/daily_spark_recommendations-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="rank">
                                        { item.rank }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="reason">
                                        { item.reason }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="shown_at">
                                        { dataFormatter.dateTimeFormatter(item.shown_at) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!users?.daily_spark_recommendations_recommended_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>Status</th>
                                
                                
                                
                                <th>StartedAt</th>
                                
                                
                                
                                <th>EndsAt</th>
                                
                                
                                
                                <th>Provider</th>
                                
                                
                                
                                <th>ProviderReference</th>
                                
                                
                                
                                <th>AutoRenew</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="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="started_at">
                                        { dataFormatter.dateTimeFormatter(item.started_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="ends_at">
                                        { dataFormatter.dateTimeFormatter(item.ends_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="provider">
                                        { item.provider }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="provider_reference">
                                        { item.provider_reference }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="auto_renew">
                                        { dataFormatter.booleanFormatter(item.auto_renew) }
                                    </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'}>User_settings User</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>Push:NewMatch</th>
                                
                                
                                
                                <th>Push:NewMessage</th>
                                
                                
                                
                                <th>Push:ProfileLike</th>
                                
                                
                                
                                <th>Push:DailySpark</th>
                                
                                
                                
                                <th>Push:Premium</th>
                                
                                
                                
                                <th>Privacy:ShowDistance</th>
                                
                                
                                
                                <th>Privacy:ShowOnlineStatus</th>
                                
                                
                                
                                <th>Privacy:AllowDiscovery</th>
                                
                                
                                
                                <th>UpdatedOn</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {users.user_settings_user && Array.isArray(users.user_settings_user) &&
                              users.user_settings_user.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/user_settings/user_settings-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="push_new_match">
                                        { dataFormatter.booleanFormatter(item.push_new_match) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="push_new_message">
                                        { dataFormatter.booleanFormatter(item.push_new_message) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="push_profile_like">
                                        { dataFormatter.booleanFormatter(item.push_profile_like) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="push_daily_spark">
                                        { dataFormatter.booleanFormatter(item.push_daily_spark) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="push_premium">
                                        { dataFormatter.booleanFormatter(item.push_premium) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="privacy_show_distance">
                                        { dataFormatter.booleanFormatter(item.privacy_show_distance) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="privacy_show_online_status">
                                        { dataFormatter.booleanFormatter(item.privacy_show_online_status) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="privacy_allow_discovery">
                                        { dataFormatter.booleanFormatter(item.privacy_allow_discovery) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="updated_on">
                                        { dataFormatter.dateTimeFormatter(item.updated_on) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!users?.user_settings_user?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Content_moderation_items User</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                <th>ContentType</th>
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                <th>TextExcerpt</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                
                                
                                <th>QueuedAt</th>
                                
                                
                                
                                <th>ReviewedAt</th>
                                
                                
                                
                                <th>ModerationNotes</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {users.content_moderation_items_user && Array.isArray(users.content_moderation_items_user) &&
                              users.content_moderation_items_user.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/content_moderation_items/content_moderation_items-view/?id=${item.id}`)}>
                                    
                                    
                                    <td data-label="content_type">
                                        { item.content_type }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="text_excerpt">
                                        { item.text_excerpt }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="queued_at">
                                        { dataFormatter.dateTimeFormatter(item.queued_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="reviewed_at">
                                        { dataFormatter.dateTimeFormatter(item.reviewed_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="moderation_notes">
                                        { item.moderation_notes }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!users?.content_moderation_items_user?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                
                <>
                    <p className={'block font-bold mb-2'}>Analytics_events User</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>EventName</th>
                                
                                
                                
                                <th>EventProperties</th>
                                
                                
                                
                                <th>EventAt</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {users.analytics_events_user && Array.isArray(users.analytics_events_user) &&
                              users.analytics_events_user.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/analytics_events/analytics_events-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="event_name">
                                        { item.event_name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="event_properties">
                                        { item.event_properties }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="event_at">
                                        { dataFormatter.dateTimeFormatter(item.event_at) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!users?.analytics_events_user?.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;