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

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

              

              

              

              

              

              

              

              

              

              

              

              
              

                
                <>
                    <p className={'block font-bold mb-2'}>Users Accounts</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                <th>First Name</th>
                                
                                
                                
                                <th>Last Name</th>
                                
                                
                                
                                <th>Phone Number</th>
                                
                                
                                
                                <th>E-Mail</th>
                                
                                
                                
                                <th>Disabled</th>
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {accounts.users_accounts && Array.isArray(accounts.users_accounts) &&
                              accounts.users_accounts.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/users/users-view/?id=${item.id}`)}>
                                    
                                    
                                    <td data-label="firstName">
                                        { item.firstName }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="lastName">
                                        { item.lastName }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="phoneNumber">
                                        { item.phoneNumber }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="email">
                                        { item.email }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="disabled">
                                        { dataFormatter.booleanFormatter(item.disabled) }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!accounts?.users_accounts?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                
                
                
                <>
                    <p className={'block font-bold mb-2'}>Patients Account</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                <th>Patientcode</th>
                                
                                
                                
                                <th>Firstname</th>
                                
                                
                                
                                <th>Lastname</th>
                                
                                
                                
                                <th>Dateofbirth</th>
                                
                                
                                
                                <th>Sex</th>
                                
                                
                                
                                <th>Diseasestage</th>
                                
                                
                                
                                <th>Diagnosisdate</th>
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {accounts.patients_account && Array.isArray(accounts.patients_account) &&
                              accounts.patients_account.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/patients/patients-view/?id=${item.id}`)}>
                                    
                                    
                                    <td data-label="patient_code">
                                        { item.patient_code }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="first_name">
                                        { item.first_name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="last_name">
                                        { item.last_name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="date_of_birth">
                                        { dataFormatter.dateTimeFormatter(item.date_of_birth) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="sex">
                                        { item.sex }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="disease_stage">
                                        { item.disease_stage }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="diagnosis_date">
                                        { dataFormatter.dateTimeFormatter(item.diagnosis_date) }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!accounts?.patients_account?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Patient_access_grants accounts</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>Accesslevel</th>
                                
                                
                                
                                <th>CanviewIoTlocation</th>
                                
                                
                                
                                <th>Canmanagemedications</th>
                                
                                
                                
                                <th>Canmanagecalendar</th>
                                
                                
                                
                                <th>Canviewhealthdata</th>
                                
                                
                                
                                <th>Grantedat</th>
                                
                                
                                
                                <th>Revokedat</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {accounts.patient_access_grants_accounts && Array.isArray(accounts.patient_access_grants_accounts) &&
                              accounts.patient_access_grants_accounts.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/patient_access_grants/patient_access_grants-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="access_level">
                                        { item.access_level }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="can_view_iot_location">
                                        { dataFormatter.booleanFormatter(item.can_view_iot_location) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="can_manage_medications">
                                        { dataFormatter.booleanFormatter(item.can_manage_medications) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="can_manage_calendar">
                                        { dataFormatter.booleanFormatter(item.can_manage_calendar) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="can_view_health_data">
                                        { dataFormatter.booleanFormatter(item.can_view_health_data) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="granted_at">
                                        { dataFormatter.dateTimeFormatter(item.granted_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="revoked_at">
                                        { dataFormatter.dateTimeFormatter(item.revoked_at) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!accounts?.patient_access_grants_accounts?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Medications accounts</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>Medicationname</th>
                                
                                
                                
                                <th>Dosage</th>
                                
                                
                                
                                <th>Route</th>
                                
                                
                                
                                <th>Instructions</th>
                                
                                
                                
                                <th>Startat</th>
                                
                                
                                
                                <th>Endat</th>
                                
                                
                                
                                <th>Isactive</th>
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {accounts.medications_accounts && Array.isArray(accounts.medications_accounts) &&
                              accounts.medications_accounts.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/medications/medications-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="medication_name">
                                        { item.medication_name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="dosage">
                                        { item.dosage }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="route">
                                        { item.route }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="instructions">
                                        { item.instructions }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="start_at">
                                        { dataFormatter.dateTimeFormatter(item.start_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="end_at">
                                        { dataFormatter.dateTimeFormatter(item.end_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="is_active">
                                        { dataFormatter.booleanFormatter(item.is_active) }
                                    </td>
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!accounts?.medications_accounts?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Medication_schedules accounts</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>Frequencytype</th>
                                
                                
                                
                                <th>Timeofday</th>
                                
                                
                                
                                <th>Daysofweek</th>
                                
                                
                                
                                <th>Effectivefrom</th>
                                
                                
                                
                                <th>Effectiveuntil</th>
                                
                                
                                
                                <th>Requiresconfirmation</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {accounts.medication_schedules_accounts && Array.isArray(accounts.medication_schedules_accounts) &&
                              accounts.medication_schedules_accounts.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/medication_schedules/medication_schedules-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="frequency_type">
                                        { item.frequency_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="time_of_day">
                                        { item.time_of_day }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="days_of_week">
                                        { item.days_of_week }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="effective_from">
                                        { dataFormatter.dateTimeFormatter(item.effective_from) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="effective_until">
                                        { dataFormatter.dateTimeFormatter(item.effective_until) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="requires_confirmation">
                                        { dataFormatter.booleanFormatter(item.requires_confirmation) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!accounts?.medication_schedules_accounts?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Calendar_events accounts</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>Title</th>
                                
                                
                                
                                
                                
                                <th>Startat</th>
                                
                                
                                
                                <th>Endat</th>
                                
                                
                                
                                <th>Location</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                <th>Hasreminder</th>
                                
                                
                                
                                <th>Reminderminutesbefore</th>
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {accounts.calendar_events_accounts && Array.isArray(accounts.calendar_events_accounts) &&
                              accounts.calendar_events_accounts.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/calendar_events/calendar_events-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="event_type">
                                        { item.event_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="title_text">
                                        { item.title_text }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="start_at">
                                        { dataFormatter.dateTimeFormatter(item.start_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="end_at">
                                        { dataFormatter.dateTimeFormatter(item.end_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="location_text">
                                        { item.location_text }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="has_reminder">
                                        { dataFormatter.booleanFormatter(item.has_reminder) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="reminder_minutes_before">
                                        { item.reminder_minutes_before }
                                    </td>
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!accounts?.calendar_events_accounts?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Reminders accounts</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>Channel</th>
                                
                                
                                
                                <th>Scheduledat</th>
                                
                                
                                
                                <th>State</th>
                                
                                
                                
                                <th>Message</th>
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {accounts.reminders_accounts && Array.isArray(accounts.reminders_accounts) &&
                              accounts.reminders_accounts.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/reminders/reminders-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="channel">
                                        { item.channel }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="scheduled_at">
                                        { dataFormatter.dateTimeFormatter(item.scheduled_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="state">
                                        { item.state }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="message">
                                        { item.message }
                                    </td>
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!accounts?.reminders_accounts?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Cognitive_programs accounts</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                <th>Programname</th>
                                
                                
                                
                                
                                
                                <th>Targetstage</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                <th>Estimatedminutes</th>
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {accounts.cognitive_programs_accounts && Array.isArray(accounts.cognitive_programs_accounts) &&
                              accounts.cognitive_programs_accounts.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/cognitive_programs/cognitive_programs-view/?id=${item.id}`)}>
                                    
                                    
                                    <td data-label="program_name">
                                        { item.program_name }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="target_stage">
                                        { item.target_stage }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="estimated_minutes">
                                        { item.estimated_minutes }
                                    </td>
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!accounts?.cognitive_programs_accounts?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Cognitive_exercises accounts</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>Exercisename</th>
                                
                                
                                
                                <th>Exercisetype</th>
                                
                                
                                
                                
                                
                                <th>Difficultylevel</th>
                                
                                
                                
                                <th>Maxscore</th>
                                
                                
                                
                                
                                
                                <th>Isactive</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {accounts.cognitive_exercises_accounts && Array.isArray(accounts.cognitive_exercises_accounts) &&
                              accounts.cognitive_exercises_accounts.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/cognitive_exercises/cognitive_exercises-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="exercise_name">
                                        { item.exercise_name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="exercise_type">
                                        { item.exercise_type }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="difficulty_level">
                                        { item.difficulty_level }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="max_score">
                                        { item.max_score }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="is_active">
                                        { dataFormatter.booleanFormatter(item.is_active) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!accounts?.cognitive_exercises_accounts?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Cognitive_sessions accounts</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                
                                
                                <th>Startedat</th>
                                
                                
                                
                                <th>Endedat</th>
                                
                                
                                
                                <th>Completionstatus</th>
                                
                                
                                
                                <th>Totalscore</th>
                                
                                
                                
                                <th>Sessionnotes</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {accounts.cognitive_sessions_accounts && Array.isArray(accounts.cognitive_sessions_accounts) &&
                              accounts.cognitive_sessions_accounts.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/cognitive_sessions/cognitive_sessions-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="started_at">
                                        { dataFormatter.dateTimeFormatter(item.started_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="ended_at">
                                        { dataFormatter.dateTimeFormatter(item.ended_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="completion_status">
                                        { item.completion_status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="total_score">
                                        { item.total_score }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="session_notes">
                                        { item.session_notes }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!accounts?.cognitive_sessions_accounts?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Cognitive_attempts accounts</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>Attemptedat</th>
                                
                                
                                
                                <th>Score</th>
                                
                                
                                
                                <th>Accuracy</th>
                                
                                
                                
                                <th>Durationseconds</th>
                                
                                
                                
                                <th>Result</th>
                                
                                
                                
                                <th>Rawresponse</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {accounts.cognitive_attempts_accounts && Array.isArray(accounts.cognitive_attempts_accounts) &&
                              accounts.cognitive_attempts_accounts.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/cognitive_attempts/cognitive_attempts-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="attempted_at">
                                        { dataFormatter.dateTimeFormatter(item.attempted_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="score">
                                        { item.score }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="accuracy">
                                        { item.accuracy }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="duration_seconds">
                                        { item.duration_seconds }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="result">
                                        { item.result }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="raw_response">
                                        { item.raw_response }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!accounts?.cognitive_attempts_accounts?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Stage_assessments accounts</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>Assessedat</th>
                                
                                
                                
                                <th>Predictedstage</th>
                                
                                
                                
                                <th>Confidencescore</th>
                                
                                
                                
                                <th>Method</th>
                                
                                
                                
                                <th>Modelversion</th>
                                
                                
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {accounts.stage_assessments_accounts && Array.isArray(accounts.stage_assessments_accounts) &&
                              accounts.stage_assessments_accounts.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/stage_assessments/stage_assessments-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="assessed_at">
                                        { dataFormatter.dateTimeFormatter(item.assessed_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="predicted_stage">
                                        { item.predicted_stage }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="confidence_score">
                                        { item.confidence_score }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="method">
                                        { item.method }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="model_version">
                                        { item.model_version }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!accounts?.stage_assessments_accounts?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Voice_assistant_sessions accounts</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>Startedat</th>
                                
                                
                                
                                <th>Endedat</th>
                                
                                
                                
                                <th>Channel</th>
                                
                                
                                
                                <th>Transcript</th>
                                
                                
                                
                                
                                
                                <th>Outcome</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {accounts.voice_assistant_sessions_accounts && Array.isArray(accounts.voice_assistant_sessions_accounts) &&
                              accounts.voice_assistant_sessions_accounts.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/voice_assistant_sessions/voice_assistant_sessions-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="started_at">
                                        { dataFormatter.dateTimeFormatter(item.started_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="ended_at">
                                        { dataFormatter.dateTimeFormatter(item.ended_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="channel">
                                        { item.channel }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="transcript">
                                        { item.transcript }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="outcome">
                                        { item.outcome }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!accounts?.voice_assistant_sessions_accounts?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Iot_devices accounts</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>Devicetype</th>
                                
                                
                                
                                <th>Devicelabel</th>
                                
                                
                                
                                <th>Serialnumber</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                <th>Pairedat</th>
                                
                                
                                
                                <th>Lastseenat</th>
                                
                                
                                
                                <th>Batterylevel</th>
                                
                                
                                
                                <th>Firmwareversion</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {accounts.iot_devices_accounts && Array.isArray(accounts.iot_devices_accounts) &&
                              accounts.iot_devices_accounts.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/iot_devices/iot_devices-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="device_type">
                                        { item.device_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="device_label">
                                        { item.device_label }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="serial_number">
                                        { item.serial_number }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="paired_at">
                                        { dataFormatter.dateTimeFormatter(item.paired_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="last_seen_at">
                                        { dataFormatter.dateTimeFormatter(item.last_seen_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="battery_level">
                                        { item.battery_level }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="firmware_version">
                                        { item.firmware_version }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!accounts?.iot_devices_accounts?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Iot_telemetry_events accounts</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>Recordedat</th>
                                
                                
                                
                                <th>Latitude</th>
                                
                                
                                
                                <th>Longitude</th>
                                
                                
                                
                                <th>Speed</th>
                                
                                
                                
                                <th>Accuracymeters</th>
                                
                                
                                
                                <th>Batterylevel</th>
                                
                                
                                
                                <th>Eventkind</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {accounts.iot_telemetry_events_accounts && Array.isArray(accounts.iot_telemetry_events_accounts) &&
                              accounts.iot_telemetry_events_accounts.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/iot_telemetry_events/iot_telemetry_events-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="recorded_at">
                                        { dataFormatter.dateTimeFormatter(item.recorded_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="latitude">
                                        { item.latitude }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="longitude">
                                        { item.longitude }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="speed">
                                        { item.speed }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="accuracy_meters">
                                        { item.accuracy_meters }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="battery_level">
                                        { item.battery_level }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="event_kind">
                                        { item.event_kind }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!accounts?.iot_telemetry_events_accounts?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Geofences accounts</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>Geofencename</th>
                                
                                
                                
                                <th>Shapetype</th>
                                
                                
                                
                                <th>Centerlatitude</th>
                                
                                
                                
                                <th>Centerlongitude</th>
                                
                                
                                
                                <th>Radiusmeters</th>
                                
                                
                                
                                <th>Polygonpoints</th>
                                
                                
                                
                                <th>Isactive</th>
                                
                                
                                
                                <th>Alerton</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {accounts.geofences_accounts && Array.isArray(accounts.geofences_accounts) &&
                              accounts.geofences_accounts.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/geofences/geofences-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="geofence_name">
                                        { item.geofence_name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="shape_type">
                                        { item.shape_type }
                                    </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="polygon_points">
                                        { item.polygon_points }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="is_active">
                                        { dataFormatter.booleanFormatter(item.is_active) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="alert_on">
                                        { item.alert_on }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!accounts?.geofences_accounts?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Alerts accounts</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                
                                
                                <th>Alerttype</th>
                                
                                
                                
                                <th>Severity</th>
                                
                                
                                
                                <th>Title</th>
                                
                                
                                
                                
                                
                                <th>Triggeredat</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                <th>Acknowledgedat</th>
                                
                                
                                
                                <th>Resolvedat</th>
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {accounts.alerts_accounts && Array.isArray(accounts.alerts_accounts) &&
                              accounts.alerts_accounts.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/alerts/alerts-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="alert_type">
                                        { item.alert_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="severity">
                                        { item.severity }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="title_text">
                                        { item.title_text }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="triggered_at">
                                        { dataFormatter.dateTimeFormatter(item.triggered_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="acknowledged_at">
                                        { dataFormatter.dateTimeFormatter(item.acknowledged_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="resolved_at">
                                        { dataFormatter.dateTimeFormatter(item.resolved_at) }
                                    </td>
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!accounts?.alerts_accounts?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Alert_notifications accounts</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>Channel</th>
                                
                                
                                
                                <th>Sentat</th>
                                
                                
                                
                                <th>Deliverystatus</th>
                                
                                
                                
                                <th>Providermessageid</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {accounts.alert_notifications_accounts && Array.isArray(accounts.alert_notifications_accounts) &&
                              accounts.alert_notifications_accounts.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/alert_notifications/alert_notifications-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="channel">
                                        { item.channel }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="sent_at">
                                        { dataFormatter.dateTimeFormatter(item.sent_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="delivery_status">
                                        { item.delivery_status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="provider_message_id">
                                        { item.provider_message_id }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!accounts?.alert_notifications_accounts?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Shared_dashboard_posts accounts</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>Title</th>
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                <th>Postedat</th>
                                
                                
                                
                                <th>Visibility</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {accounts.shared_dashboard_posts_accounts && Array.isArray(accounts.shared_dashboard_posts_accounts) &&
                              accounts.shared_dashboard_posts_accounts.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/shared_dashboard_posts/shared_dashboard_posts-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="post_type">
                                        { item.post_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="title_text">
                                        { item.title_text }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="posted_at">
                                        { dataFormatter.dateTimeFormatter(item.posted_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="visibility">
                                        { item.visibility }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!accounts?.shared_dashboard_posts_accounts?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Scientific_articles accounts</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>Journal</th>
                                
                                
                                
                                <th>Publishedat</th>
                                
                                
                                
                                <th>DOI</th>
                                
                                
                                
                                <th>URL</th>
                                
                                
                                
                                <th>Keywords</th>
                                
                                
                                
                                <th>Validationstatus</th>
                                
                                
                                
                                
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {accounts.scientific_articles_accounts && Array.isArray(accounts.scientific_articles_accounts) &&
                              accounts.scientific_articles_accounts.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/scientific_articles/scientific_articles-view/?id=${item.id}`)}>
                                    
                                    
                                    <td data-label="title_text">
                                        { item.title_text }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="journal">
                                        { item.journal }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="published_at">
                                        { dataFormatter.dateTimeFormatter(item.published_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="doi">
                                        { item.doi }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="url">
                                        { item.url }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="keywords">
                                        { item.keywords }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="validation_status">
                                        { item.validation_status }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!accounts?.scientific_articles_accounts?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Article_recommendations accounts</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>Recommendedat</th>
                                
                                
                                
                                <th>Reasontype</th>
                                
                                
                                
                                
                                
                                <th>State</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {accounts.article_recommendations_accounts && Array.isArray(accounts.article_recommendations_accounts) &&
                              accounts.article_recommendations_accounts.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/article_recommendations/article_recommendations-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="recommended_at">
                                        { dataFormatter.dateTimeFormatter(item.recommended_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="reason_type">
                                        { item.reason_type }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="state">
                                        { item.state }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!accounts?.article_recommendations_accounts?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Clinical_reports accounts</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>Periodstartat</th>
                                
                                
                                
                                <th>Periodendat</th>
                                
                                
                                
                                <th>Reporttitle</th>
                                
                                
                                
                                
                                
                                
                                
                                <th>Sharescope</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {accounts.clinical_reports_accounts && Array.isArray(accounts.clinical_reports_accounts) &&
                              accounts.clinical_reports_accounts.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/clinical_reports/clinical_reports-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="period_start_at">
                                        { dataFormatter.dateTimeFormatter(item.period_start_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="period_end_at">
                                        { dataFormatter.dateTimeFormatter(item.period_end_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="report_title">
                                        { item.report_title }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="share_scope">
                                        { item.share_scope }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!accounts?.clinical_reports_accounts?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Admin_metrics_snapshots accounts</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                <th>Snapshotat</th>
                                
                                
                                
                                <th>Totalaccounts</th>
                                
                                
                                
                                <th>Totalusers</th>
                                
                                
                                
                                <th>Totalpatients</th>
                                
                                
                                
                                <th>Activedevices</th>
                                
                                
                                
                                <th>Alertslast24h</th>
                                
                                
                                
                                <th>Cognitivesessionslast7d</th>
                                
                                
                                
                                <th>Reminderssentlast24h</th>
                                
                                
                                
                                <th>Notes</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {accounts.admin_metrics_snapshots_accounts && Array.isArray(accounts.admin_metrics_snapshots_accounts) &&
                              accounts.admin_metrics_snapshots_accounts.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/admin_metrics_snapshots/admin_metrics_snapshots-view/?id=${item.id}`)}>
                                    
                                    
                                    <td data-label="snapshot_at">
                                        { dataFormatter.dateTimeFormatter(item.snapshot_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="total_accounts">
                                        { item.total_accounts }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="total_users">
                                        { item.total_users }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="total_patients">
                                        { item.total_patients }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="active_devices">
                                        { item.active_devices }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="alerts_last_24h">
                                        { item.alerts_last_24h }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="cognitive_sessions_last_7d">
                                        { item.cognitive_sessions_last_7d }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="reminders_sent_last_24h">
                                        { item.reminders_sent_last_24h }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="notes">
                                        { item.notes }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!accounts?.admin_metrics_snapshots_accounts?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                

                <BaseDivider />

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

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

export default AccountsView;