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

              

              

              

              

              

              

              

              

              

              
                {hasPermission(currentUser, 'READ_ORGANIZATIONS') && 
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>Organization</p>
                    
                    
                    
                    
                    
                    
                    
                    
                        <p>{projects?.organization?.name ?? 'No data'}</p>
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                </div>
                  } 
              

              

              

              
              

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

              

              

              

              

              

              

              

              

              

              

              

              
              

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>ProjectCode</p>
                    <p>{projects?.project_code}</p>
                </div>
              

              

              

              

              

              

              

              

              

              

              

              

              
              

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>LocationName</p>
                    <p>{projects?.location_name}</p>
                </div>
              

              

              

              

              

              

              

              

              

              

              

              

              
              

              

              

              

              
                <div className={'mb-4'}>
                  <p className={'block font-bold mb-2'}>Latitude</p>
                  <p>{projects?.latitude || 'No data'}</p>
                </div>
              

              

              

              

              

              

              

              

              

              
              

              

              

              

              
                <div className={'mb-4'}>
                  <p className={'block font-bold mb-2'}>Longitude</p>
                  <p>{projects?.longitude || 'No data'}</p>
                </div>
              

              

              

              

              

              

              

              

              

              
              

              

              

              

              

              

              

              

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>Commodity</p>
                    <p>{projects?.commodity ?? 'No data'}</p>
                </div>
              

              

              

              

              

              
              

              

              

              

              

              

              

              

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>Status</p>
                    <p>{projects?.status ?? 'No data'}</p>
                </div>
              

              

              

              

              

              
              

              

              

              

              

              

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

              

              

              

              

              

              

              
              

              

              

              

              

              

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

              

              

              

              

              

              

              
              

              

              

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

              

              

              

              

              

              

              

              

              

              
              

              

              

              

              

              

              

              

              

              

              

              
                <>
                    <p className={'block font-bold mb-2'}>TeamMembers</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>
                            {projects.team_members && Array.isArray(projects.team_members) &&
                              projects.team_members.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>
                        {!projects?.team_members?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
              

              

              
              

                
                
                
                
                
                
                <>
                    <p className={'block font-bold mb-2'}>Project_phases Project</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>PhaseType</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                <th>StartDate</th>
                                
                                
                                
                                <th>TargetDate</th>
                                
                                
                                
                                <th>ApprovedAt</th>
                                
                                
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {projects.project_phases_project && Array.isArray(projects.project_phases_project) &&
                              projects.project_phases_project.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/project_phases/project_phases-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="phase_type">
                                        { item.phase_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="start_date">
                                        { dataFormatter.dateTimeFormatter(item.start_date) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="target_date">
                                        { dataFormatter.dateTimeFormatter(item.target_date) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="approved_at">
                                        { dataFormatter.dateTimeFormatter(item.approved_at) }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!projects?.project_phases_project?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Milestones Project</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>Status</th>
                                
                                
                                
                                <th>DueDate</th>
                                
                                
                                
                                <th>CompletedAt</th>
                                
                                
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {projects.milestones_project && Array.isArray(projects.milestones_project) &&
                              projects.milestones_project.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/milestones/milestones-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="title">
                                        { item.title }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="due_date">
                                        { dataFormatter.dateTimeFormatter(item.due_date) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="completed_at">
                                        { dataFormatter.dateTimeFormatter(item.completed_at) }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!projects?.milestones_project?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Ore_bodies Project</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>OreBodyName</th>
                                
                                
                                
                                <th>Classification</th>
                                
                                
                                
                                <th>OreType</th>
                                
                                
                                
                                <th>HeadGradeAu(g/t)</th>
                                
                                
                                
                                <th>Tonnage(Mt)</th>
                                
                                
                                
                                <th>MineralogyJSON</th>
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {projects.ore_bodies_project && Array.isArray(projects.ore_bodies_project) &&
                              projects.ore_bodies_project.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/ore_bodies/ore_bodies-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="name">
                                        { item.name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="classification">
                                        { item.classification }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="ore_type">
                                        { item.ore_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="head_grade_au_gpt">
                                        { item.head_grade_au_gpt }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="tonnage_mt">
                                        { item.tonnage_mt }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="mineralogy_json">
                                        { item.mineralogy_json }
                                    </td>
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!projects?.ore_bodies_project?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Samples Project</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>SampleCode</th>
                                
                                
                                
                                <th>SampleType</th>
                                
                                
                                
                                <th>DrillholeID</th>
                                
                                
                                
                                <th>DepthFrom(m)</th>
                                
                                
                                
                                <th>DepthTo(m)</th>
                                
                                
                                
                                <th>CollectionDate</th>
                                
                                
                                
                                <th>Lithology</th>
                                
                                
                                
                                <th>Alteration</th>
                                
                                
                                
                                <th>GeometDomain</th>
                                
                                
                                
                                
                                
                                <th>PrepProtocol</th>
                                
                                
                                
                                <th>QAQCType</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {projects.samples_project && Array.isArray(projects.samples_project) &&
                              projects.samples_project.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/samples/samples-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="sample_code">
                                        { item.sample_code }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="sample_type">
                                        { item.sample_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="drillhole_id">
                                        { item.drillhole_id }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="depth_from_m">
                                        { item.depth_from_m }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="depth_to_m">
                                        { item.depth_to_m }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="collection_date">
                                        { dataFormatter.dateTimeFormatter(item.collection_date) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="lithology">
                                        { item.lithology }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="alteration">
                                        { item.alteration }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="geomet_domain">
                                        { item.geomet_domain }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="prep_protocol">
                                        { item.prep_protocol }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="qaqc_type">
                                        { item.qaqc_type }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!projects?.samples_project?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                
                
                
                <>
                    <p className={'block font-bold mb-2'}>Metallurgical_tests Project</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                <th>LabReference</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                <th>DateSubmitted</th>
                                
                                
                                
                                <th>DateCompleted</th>
                                
                                
                                
                                <th>DataSource</th>
                                
                                
                                
                                <th>ParametersJSON</th>
                                
                                
                                
                                <th>ResultsJSON</th>
                                
                                
                                
                                <th>QAQCStatus</th>
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                <th>ReviewedAt</th>
                                
                                
                                
                                
                                
                                <th>ApprovedAt</th>
                                
                                
                                
                                <th>IsDeleted</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {projects.metallurgical_tests_project && Array.isArray(projects.metallurgical_tests_project) &&
                              projects.metallurgical_tests_project.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/metallurgical_tests/metallurgical_tests-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="lab_reference">
                                        { item.lab_reference }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="date_submitted">
                                        { dataFormatter.dateTimeFormatter(item.date_submitted) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="date_completed">
                                        { dataFormatter.dateTimeFormatter(item.date_completed) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="data_source">
                                        { item.data_source }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="parameters_json">
                                        { item.parameters_json }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="results_json">
                                        { item.results_json }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="qaqc_status">
                                        { item.qaqc_status }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="reviewed_at">
                                        { dataFormatter.dateTimeFormatter(item.reviewed_at) }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="approved_at">
                                        { dataFormatter.dateTimeFormatter(item.approved_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="is_deleted">
                                        { dataFormatter.booleanFormatter(item.is_deleted) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!projects?.metallurgical_tests_project?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                
                <>
                    <p className={'block font-bold mb-2'}>Flowsheets Project</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>FlowsheetName</th>
                                
                                
                                
                                <th>VersionNumber</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                
                                
                                <th>LayoutJSON</th>
                                
                                
                                
                                
                                
                                <th>ApprovedAt</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {projects.flowsheets_project && Array.isArray(projects.flowsheets_project) &&
                              projects.flowsheets_project.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/flowsheets/flowsheets-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="name">
                                        { item.name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="version_number">
                                        { item.version_number }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="layout_json">
                                        { item.layout_json }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="approved_at">
                                        { dataFormatter.dateTimeFormatter(item.approved_at) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!projects?.flowsheets_project?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                
                
                
                <>
                    <p className={'block font-bold mb-2'}>Design_criteria_items Project</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>Parameter</th>
                                
                                
                                
                                <th>Value</th>
                                
                                
                                
                                <th>Unit</th>
                                
                                
                                
                                <th>Confidence</th>
                                
                                
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {projects.design_criteria_items_project && Array.isArray(projects.design_criteria_items_project) &&
                              projects.design_criteria_items_project.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/design_criteria_items/design_criteria_items-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="parameter">
                                        { item.parameter }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="value">
                                        { item.value }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="unit">
                                        { item.unit }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="confidence">
                                        { item.confidence }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!projects?.design_criteria_items_project?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Economic_models Project</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                
                                
                                <th>ModelName</th>
                                
                                
                                
                                <th>Currency</th>
                                
                                
                                
                                <th>GoldPrice</th>
                                
                                
                                
                                <th>DiscountRate(%)</th>
                                
                                
                                
                                <th>Throughput(tpd)</th>
                                
                                
                                
                                <th>Recovery(%)</th>
                                
                                
                                
                                <th>MineLife(years)</th>
                                
                                
                                
                                <th>TotalCAPEX</th>
                                
                                
                                
                                <th>OPEXPerTonne</th>
                                
                                
                                
                                <th>NPV</th>
                                
                                
                                
                                <th>IRR(%)</th>
                                
                                
                                
                                <th>Payback(years)</th>
                                
                                
                                
                                <th>AssumptionsJSON</th>
                                
                                
                                
                                <th>SensitivityJSON</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {projects.economic_models_project && Array.isArray(projects.economic_models_project) &&
                              projects.economic_models_project.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/economic_models/economic_models-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="name">
                                        { item.name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="currency">
                                        { item.currency }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="gold_price">
                                        { item.gold_price }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="discount_rate_pct">
                                        { item.discount_rate_pct }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="throughput_tpd">
                                        { item.throughput_tpd }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="recovery_pct">
                                        { item.recovery_pct }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="mine_life_years">
                                        { item.mine_life_years }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="capex_total">
                                        { item.capex_total }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="opex_per_tonne">
                                        { item.opex_per_tonne }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="npv">
                                        { item.npv }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="irr_pct">
                                        { item.irr_pct }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="payback_years">
                                        { item.payback_years }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="assumptions_json">
                                        { item.assumptions_json }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="sensitivity_json">
                                        { item.sensitivity_json }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!projects?.economic_models_project?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                
                
                
                <>
                    <p className={'block font-bold mb-2'}>Documents Project</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>DocumentType</th>
                                
                                
                                
                                <th>Title</th>
                                
                                
                                
                                <th>VersionNumber</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                
                                
                                <th>Tags</th>
                                
                                
                                
                                
                                
                                <th>UploadedAt</th>
                                
                                
                                
                                
                                
                                <th>WatermarkEnabled</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {projects.documents_project && Array.isArray(projects.documents_project) &&
                              projects.documents_project.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/documents/documents-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="doc_type">
                                        { item.doc_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="title">
                                        { item.title }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="version_number">
                                        { item.version_number }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="tags">
                                        { item.tags }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="uploaded_at">
                                        { dataFormatter.dateTimeFormatter(item.uploaded_at) }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="watermark_enabled">
                                        { dataFormatter.booleanFormatter(item.watermark_enabled) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!projects?.documents_project?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                
                <>
                    <p className={'block font-bold mb-2'}>Comments Project</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>EntityType</th>
                                
                                
                                
                                <th>EntityKey</th>
                                
                                
                                
                                
                                
                                
                                
                                <th>PostedAt</th>
                                
                                
                                
                                
                                
                                <th>IsResolved</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {projects.comments_project && Array.isArray(projects.comments_project) &&
                              projects.comments_project.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/comments/comments-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="entity_type">
                                        { item.entity_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="entity_key">
                                        { item.entity_key }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="posted_at">
                                        { dataFormatter.dateTimeFormatter(item.posted_at) }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="is_resolved">
                                        { dataFormatter.booleanFormatter(item.is_resolved) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!projects?.comments_project?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Tasks Project</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>Status</th>
                                
                                
                                
                                <th>Priority</th>
                                
                                
                                
                                
                                
                                
                                
                                <th>DueAt</th>
                                
                                
                                
                                <th>CompletedAt</th>
                                
                                
                                
                                
                                
                                <th>EntityType</th>
                                
                                
                                
                                <th>EntityKey</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {projects.tasks_project && Array.isArray(projects.tasks_project) &&
                              projects.tasks_project.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/tasks/tasks-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="title">
                                        { item.title }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="priority">
                                        { item.priority }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="due_at">
                                        { dataFormatter.dateTimeFormatter(item.due_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="completed_at">
                                        { dataFormatter.dateTimeFormatter(item.completed_at) }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="entity_type">
                                        { item.entity_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="entity_key">
                                        { item.entity_key }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!projects?.tasks_project?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Notifications Project</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>NotificationType</th>
                                
                                
                                
                                <th>Title</th>
                                
                                
                                
                                <th>Message</th>
                                
                                
                                
                                <th>SentAt</th>
                                
                                
                                
                                <th>ReadAt</th>
                                
                                
                                
                                <th>IsRead</th>
                                
                                
                                
                                <th>EntityType</th>
                                
                                
                                
                                <th>EntityKey</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {projects.notifications_project && Array.isArray(projects.notifications_project) &&
                              projects.notifications_project.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/notifications/notifications-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="channel">
                                        { item.channel }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="notification_type">
                                        { item.notification_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="title">
                                        { item.title }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="message">
                                        { item.message }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="sent_at">
                                        { dataFormatter.dateTimeFormatter(item.sent_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="read_at">
                                        { dataFormatter.dateTimeFormatter(item.read_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="is_read">
                                        { dataFormatter.booleanFormatter(item.is_read) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="entity_type">
                                        { item.entity_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="entity_key">
                                        { item.entity_key }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!projects?.notifications_project?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Audit_logs Project</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                <th>EventTime</th>
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                <th>Action</th>
                                
                                
                                
                                <th>EntityType</th>
                                
                                
                                
                                <th>EntityKey</th>
                                
                                
                                
                                <th>OldValueJSON</th>
                                
                                
                                
                                <th>NewValueJSON</th>
                                
                                
                                
                                <th>ChangeSummary</th>
                                
                                
                                
                                <th>IPAddress</th>
                                
                                
                                
                                <th>UserAgent</th>
                                
                                
                                
                                <th>SessionKey</th>
                                
                                
                                
                                <th>Checksum</th>
                                
                                
                                
                                <th>PreviousChecksum</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {projects.audit_logs_project && Array.isArray(projects.audit_logs_project) &&
                              projects.audit_logs_project.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/audit_logs/audit_logs-view/?id=${item.id}`)}>
                                    
                                    
                                    <td data-label="event_time">
                                        { dataFormatter.dateTimeFormatter(item.event_time) }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="action">
                                        { item.action }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="entity_type">
                                        { item.entity_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="entity_key">
                                        { item.entity_key }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="old_value_json">
                                        { item.old_value_json }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="new_value_json">
                                        { item.new_value_json }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="change_summary">
                                        { item.change_summary }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="ip_address">
                                        { item.ip_address }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="user_agent">
                                        { item.user_agent }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="session_key">
                                        { item.session_key }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="checksum">
                                        { item.checksum }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="previous_checksum">
                                        { item.previous_checksum }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!projects?.audit_logs_project?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                
                <>
                    <p className={'block font-bold mb-2'}>Offline_sync_batches Project</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>CreatedAtLocal</th>
                                
                                
                                
                                <th>SyncedAt</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                <th>ItemsCount</th>
                                
                                
                                
                                <th>PayloadJSON</th>
                                
                                
                                
                                <th>ErrorDetails</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {projects.offline_sync_batches_project && Array.isArray(projects.offline_sync_batches_project) &&
                              projects.offline_sync_batches_project.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/offline_sync_batches/offline_sync_batches-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="created_at_local">
                                        { dataFormatter.dateTimeFormatter(item.created_at_local) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="synced_at">
                                        { dataFormatter.dateTimeFormatter(item.synced_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="items_count">
                                        { item.items_count }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="payload_json">
                                        { item.payload_json }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="error_details">
                                        { item.error_details }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!projects?.offline_sync_batches_project?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                

                <BaseDivider />

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

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

export default ProjectsView;