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

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>Patientcode</p>
                    <p>{patients?.patient_code}</p>
                </div>
              

              

              

              

              

              

              

              

              

              

              

              

              
              

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>Firstname</p>
                    <p>{patients?.first_name}</p>
                </div>
              

              

              

              

              

              

              

              

              

              

              

              

              
              

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>Lastname</p>
                    <p>{patients?.last_name}</p>
                </div>
              

              

              

              

              

              

              

              

              

              

              

              

              
              

              

              

              

              

              

              
                <FormField label='Dateofbirth'>
                    {patients.date_of_birth ? <DatePicker
                      dateFormat="yyyy-MM-dd hh:mm"
                      showTimeSelect
                      selected={patients.date_of_birth ?
                        new Date(
                          dayjs(patients.date_of_birth).format('YYYY-MM-DD hh:mm'),
                        ) : null
                      }
                      disabled
                    /> : <p>No Dateofbirth</p>}
                </FormField>
              

              

              

              

              

              

              

              
              

              

              

              

              

              

              

              

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>Sex</p>
                    <p>{patients?.sex ?? 'No data'}</p>
                </div>
              

              

              

              

              

              
              

              

              

              

              

              

              

              

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>Diseasestage</p>
                    <p>{patients?.disease_stage ?? 'No data'}</p>
                </div>
              

              

              

              

              

              
              

              

              

              

              

              

              
                <FormField label='Diagnosisdate'>
                    {patients.diagnosis_date ? <DatePicker
                      dateFormat="yyyy-MM-dd hh:mm"
                      showTimeSelect
                      selected={patients.diagnosis_date ?
                        new Date(
                          dayjs(patients.diagnosis_date).format('YYYY-MM-DD hh:mm'),
                        ) : null
                      }
                      disabled
                    /> : <p>No Diagnosisdate</p>}
                </FormField>
              

              

              

              

              

              

              

              
              

              

              

              
                <div className={'mb-4'}>
                  <p className={'block font-bold mb-2'}>Medicalnotes</p>
                  {patients.medical_notes
                    ? <p dangerouslySetInnerHTML={{__html: patients.medical_notes}}/>
                    : <p>No data</p>
                  }
                </div>
              

              

              

              

              

              

              

              

              

              

              
              

              

              

              

              

              

              

              

              

              

              

              

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

              
              

              

              

              

              

              

              

              

              

              

              
              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>Account</p>
                    
                    
                    
                    
                    
                    
                    
                    
                        <p>{patients?.account?.name ?? 'No data'}</p>
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                </div>
                 
              

              

              

              
              

              

              

              

              

              

              

              

              

              

              
              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>Primaryphysician</p>
                    
                    
                        <p>{patients?.primary_physician?.firstName ?? 'No data'}</p>
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                </div>
                 
              

              

              

              
              

                
                
                
                
                
                
                <>
                    <p className={'block font-bold mb-2'}>Patient_access_grants Patient</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>
                            {patients.patient_access_grants_patient && Array.isArray(patients.patient_access_grants_patient) &&
                              patients.patient_access_grants_patient.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>
                        {!patients?.patient_access_grants_patient?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Medications Patient</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>
                            {patients.medications_patient && Array.isArray(patients.medications_patient) &&
                              patients.medications_patient.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>
                        {!patients?.medications_patient?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Medication_schedules Patient</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>
                            {patients.medication_schedules_patient && Array.isArray(patients.medication_schedules_patient) &&
                              patients.medication_schedules_patient.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>
                        {!patients?.medication_schedules_patient?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Calendar_events Patient</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>
                            {patients.calendar_events_patient && Array.isArray(patients.calendar_events_patient) &&
                              patients.calendar_events_patient.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>
                        {!patients?.calendar_events_patient?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Reminders Patient</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>
                            {patients.reminders_patient && Array.isArray(patients.reminders_patient) &&
                              patients.reminders_patient.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>
                        {!patients?.reminders_patient?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                
                
                <>
                    <p className={'block font-bold mb-2'}>Cognitive_sessions Patient</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>
                            {patients.cognitive_sessions_patient && Array.isArray(patients.cognitive_sessions_patient) &&
                              patients.cognitive_sessions_patient.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>
                        {!patients?.cognitive_sessions_patient?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                
                <>
                    <p className={'block font-bold mb-2'}>Stage_assessments Patient</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>
                            {patients.stage_assessments_patient && Array.isArray(patients.stage_assessments_patient) &&
                              patients.stage_assessments_patient.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>
                        {!patients?.stage_assessments_patient?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Voice_assistant_sessions Patient</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>
                            {patients.voice_assistant_sessions_patient && Array.isArray(patients.voice_assistant_sessions_patient) &&
                              patients.voice_assistant_sessions_patient.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>
                        {!patients?.voice_assistant_sessions_patient?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Iot_devices Patient</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>
                            {patients.iot_devices_patient && Array.isArray(patients.iot_devices_patient) &&
                              patients.iot_devices_patient.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>
                        {!patients?.iot_devices_patient?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Iot_telemetry_events Patient</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>
                            {patients.iot_telemetry_events_patient && Array.isArray(patients.iot_telemetry_events_patient) &&
                              patients.iot_telemetry_events_patient.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>
                        {!patients?.iot_telemetry_events_patient?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Geofences Patient</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>
                            {patients.geofences_patient && Array.isArray(patients.geofences_patient) &&
                              patients.geofences_patient.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>
                        {!patients?.geofences_patient?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Alerts Patient</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>
                            {patients.alerts_patient && Array.isArray(patients.alerts_patient) &&
                              patients.alerts_patient.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>
                        {!patients?.alerts_patient?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                
                <>
                    <p className={'block font-bold mb-2'}>Shared_dashboard_posts Patient</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>
                            {patients.shared_dashboard_posts_patient && Array.isArray(patients.shared_dashboard_posts_patient) &&
                              patients.shared_dashboard_posts_patient.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>
                        {!patients?.shared_dashboard_posts_patient?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                
                <>
                    <p className={'block font-bold mb-2'}>Article_recommendations Patient</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>
                            {patients.article_recommendations_patient && Array.isArray(patients.article_recommendations_patient) &&
                              patients.article_recommendations_patient.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>
                        {!patients?.article_recommendations_patient?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Clinical_reports Patient</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>
                            {patients.clinical_reports_patient && Array.isArray(patients.clinical_reports_patient) &&
                              patients.clinical_reports_patient.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>
                        {!patients?.clinical_reports_patient?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                

                <BaseDivider />

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

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

export default PatientsView;