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

              

              

              

              

              

              

              

              

              

              
              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>Usuário</p>
                    
                    
                        <p>{declarations?.user?.firstName ?? 'No data'}</p>
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                </div>
                 
              

              

              

              
              

              

              

              

              
                <div className={'mb-4'}>
                  <p className={'block font-bold mb-2'}>Ano-base</p>
                  <p>{declarations?.base_year || 'No data'}</p>
                </div>
              

              

              

              

              

              

              

              

              

              
              

              

              

              

              

              

              

              

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

              

              

              

              

              
              

              

              

              

              

              

              

              

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>Modelodetributação</p>
                    <p>{declarations?.tax_model ?? 'No data'}</p>
                </div>
              

              

              

              

              

              
              

              

              

              

              

              

              

              

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>Tipodedeclaração</p>
                    <p>{declarations?.declaration_type ?? 'No data'}</p>
                </div>
              

              

              

              

              

              
              

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>Númerodoreciboanterior</p>
                    <p>{declarations?.previous_receipt_number}</p>
                </div>
              

              

              

              

              

              

              

              

              

              

              

              

              
              

              

              

              

              
                <div className={'mb-4'}>
                  <p className={'block font-bold mb-2'}>Impostocalculado</p>
                  <p>{declarations?.tax_calculated || 'No data'}</p>
                </div>
              

              

              

              

              

              

              

              

              

              
              

              

              

              

              
                <div className={'mb-4'}>
                  <p className={'block font-bold mb-2'}>IRretidonafonte</p>
                  <p>{declarations?.tax_withheld || 'No data'}</p>
                </div>
              

              

              

              

              

              

              

              

              

              
              

              

              

              

              
                <div className={'mb-4'}>
                  <p className={'block font-bold mb-2'}>Saldoarestituir</p>
                  <p>{declarations?.refund_amount || 'No data'}</p>
                </div>
              

              

              

              

              

              

              

              

              

              
              

              

              

              

              
                <div className={'mb-4'}>
                  <p className={'block font-bold mb-2'}>Saldoapagar</p>
                  <p>{declarations?.payable_amount || 'No data'}</p>
                </div>
              

              

              

              

              

              

              

              

              

              
              

              

              

              

              
                <div className={'mb-4'}>
                  <p className={'block font-bold mb-2'}>Riskscore</p>
                  <p>{declarations?.risk_score || 'No data'}</p>
                </div>
              

              

              

              

              

              

              

              

              

              
              

              

              
                <FormField label='Multi Text' hasTextareaHeight>
                  <textarea className={'w-full'} disabled value={declarations?.risk_details_json} />
                </FormField>
              

              

              

              

              

              

              

              

              

              

              

              
              

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>URLdoarquivoDEC</p>
                    <p>{declarations?.dec_file_url}</p>
                </div>
              

              

              

              

              

              

              

              

              

              

              

              

              
              

              

              

              

              

              

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

              

              

              

              

              

              

              
              

              

              

              

              

              

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

              

              

              

              

              

              

              
              

              

              

              

              

              

              

              

              

              

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

              

              

              
              

                
                
                
                
                
                
                
                
                <>
                    <p className={'block font-bold mb-2'}>Dependents Declaração</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>Nome</th>
                                
                                
                                
                                <th>CPF</th>
                                
                                
                                
                                <th>Datadenascimento</th>
                                
                                
                                
                                <th>Códigodeparentesco</th>
                                
                                
                                
                                <th>Estudante</th>
                                
                                
                                
                                <th>Planodesaúde</th>
                                
                                
                                
                                <th>Rendaprópria</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {declarations.dependents_declaration && Array.isArray(declarations.dependents_declaration) &&
                              declarations.dependents_declaration.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/dependents/dependents-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="name">
                                        { item.name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="cpf">
                                        { item.cpf }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="birth_date">
                                        { dataFormatter.dateTimeFormatter(item.birth_date) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="relationship_code">
                                        { item.relationship_code }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="student">
                                        { dataFormatter.booleanFormatter(item.student) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="health_plan">
                                        { dataFormatter.booleanFormatter(item.health_plan) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="own_income">
                                        { item.own_income }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!declarations?.dependents_declaration?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Data_sources Declaração</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>Tipo</th>
                                
                                
                                
                                <th>Instituição</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                <th>Dadosimportados(JSON)</th>
                                
                                
                                
                                <th>Datadeimportação</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {declarations.data_sources_declaration && Array.isArray(declarations.data_sources_declaration) &&
                              declarations.data_sources_declaration.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/data_sources/data_sources-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="source_type">
                                        { item.source_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="institution_name">
                                        { item.institution_name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="imported_payload_json">
                                        { item.imported_payload_json }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="imported_at">
                                        { dataFormatter.dateTimeFormatter(item.imported_at) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!declarations?.data_sources_declaration?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Transactions Declaração</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>Data</th>
                                
                                
                                
                                <th>Descrição</th>
                                
                                
                                
                                <th>Valor</th>
                                
                                
                                
                                <th>Tipo</th>
                                
                                
                                
                                <th>Categoria(IA)</th>
                                
                                
                                
                                <th>CampoIR</th>
                                
                                
                                
                                <th>FichaIR</th>
                                
                                
                                
                                <th>Tributação</th>
                                
                                
                                
                                <th>Confiança(0-100)</th>
                                
                                
                                
                                <th>Revisadopelousuário</th>
                                
                                
                                
                                <th>Requerrevisãohumana</th>
                                
                                
                                
                                <th>Motivodarevisão</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {declarations.transactions_declaration && Array.isArray(declarations.transactions_declaration) &&
                              declarations.transactions_declaration.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/transactions/transactions-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="transaction_date">
                                        { dataFormatter.dateTimeFormatter(item.transaction_date) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="description">
                                        { item.description }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="amount">
                                        { item.amount }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="direction">
                                        { item.direction }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="ai_category">
                                        { item.ai_category }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="ir_field">
                                        { item.ir_field }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="ir_form">
                                        { item.ir_form }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="taxation_type">
                                        { item.taxation_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="confidence_score">
                                        { item.confidence_score }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="reviewed_by_user">
                                        { dataFormatter.booleanFormatter(item.reviewed_by_user) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="requires_human_review">
                                        { dataFormatter.booleanFormatter(item.requires_human_review) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="review_reason">
                                        { item.review_reason }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!declarations?.transactions_declaration?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Documents Declaração</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>Tipodedocumento</th>
                                
                                
                                
                                <th>Nomedoarquivo</th>
                                
                                
                                
                                <th>URLnostorage</th>
                                
                                
                                
                                <th>Statusdeextração</th>
                                
                                
                                
                                <th>Confiançaextração(0-100)</th>
                                
                                
                                
                                <th>Dadosextraídos(JSON)</th>
                                
                                
                                
                                <th>Revisado</th>
                                
                                
                                
                                <th>Emissor</th>
                                
                                
                                
                                <th>CNPJdoemissor</th>
                                
                                
                                
                                <th>Anodereferência</th>
                                
                                
                                
                                <th>Datadeupload</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {declarations.documents_declaration && Array.isArray(declarations.documents_declaration) &&
                              declarations.documents_declaration.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/documents/documents-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="document_type">
                                        { item.document_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="file_name">
                                        { item.file_name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="storage_url">
                                        { item.storage_url }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="extraction_status">
                                        { item.extraction_status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="extraction_confidence">
                                        { item.extraction_confidence }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="extracted_data_json">
                                        { item.extracted_data_json }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="reviewed">
                                        { dataFormatter.booleanFormatter(item.reviewed) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="issuer_name">
                                        { item.issuer_name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="issuer_cnpj">
                                        { item.issuer_cnpj }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="reference_year">
                                        { item.reference_year }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="uploaded_at">
                                        { dataFormatter.dateTimeFormatter(item.uploaded_at) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!declarations?.documents_declaration?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Income_payers_pj Declaração</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>CNPJdafonte</th>
                                
                                
                                
                                <th>Nomedafonte</th>
                                
                                
                                
                                <th>Rendimentostributáveis</th>
                                
                                
                                
                                <th>Deduçõesoficiais</th>
                                
                                
                                
                                <th>INSSretido</th>
                                
                                
                                
                                <th>Impostoretido</th>
                                
                                
                                
                                <th>13ºsalário</th>
                                
                                
                                
                                <th>URLdoinforme</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {declarations.income_payers_pj_declaration && Array.isArray(declarations.income_payers_pj_declaration) &&
                              declarations.income_payers_pj_declaration.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/income_payers_pj/income_payers_pj-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="payer_cnpj">
                                        { item.payer_cnpj }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="payer_name">
                                        { item.payer_name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="taxable_income">
                                        { item.taxable_income }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="official_deductions">
                                        { item.official_deductions }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="inss_withheld">
                                        { item.inss_withheld }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="tax_withheld">
                                        { item.tax_withheld }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="thirteenth_salary">
                                        { item.thirteenth_salary }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="informe_document_url">
                                        { item.informe_document_url }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!declarations?.income_payers_pj_declaration?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Income_carne_leao_monthly Declaração</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>Ano</th>
                                
                                
                                
                                <th>Mês</th>
                                
                                
                                
                                <th>Receitabruta</th>
                                
                                
                                
                                <th>Deduçõeslivro-caixa</th>
                                
                                
                                
                                <th>Basedecálculo</th>
                                
                                
                                
                                <th>Impostodevido</th>
                                
                                
                                
                                <th>DARFpago</th>
                                
                                
                                
                                <th>ComprovanteDARF(URL)</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {declarations.income_carne_leao_monthly_declaration && Array.isArray(declarations.income_carne_leao_monthly_declaration) &&
                              declarations.income_carne_leao_monthly_declaration.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/income_carne_leao_monthly/income_carne_leao_monthly-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="year">
                                        { item.year }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="month">
                                        { item.month }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="gross_revenue">
                                        { item.gross_revenue }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="bookkeeping_deductions">
                                        { item.bookkeeping_deductions }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="taxable_base">
                                        { item.taxable_base }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="tax_due">
                                        { item.tax_due }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="darf_paid">
                                        { dataFormatter.booleanFormatter(item.darf_paid) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="darf_document_url">
                                        { item.darf_document_url }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!declarations?.income_carne_leao_monthly_declaration?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Exempt_incomes Declaração</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>Tipoderendimentoisento</th>
                                
                                
                                
                                <th>Fonte</th>
                                
                                
                                
                                <th>CPF/CNPJdafonte</th>
                                
                                
                                
                                <th>Valor</th>
                                
                                
                                
                                <th>Competência</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {declarations.exempt_incomes_declaration && Array.isArray(declarations.exempt_incomes_declaration) &&
                              declarations.exempt_incomes_declaration.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/exempt_incomes/exempt_incomes-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="income_type">
                                        { item.income_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="source_name">
                                        { item.source_name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="source_document">
                                        { item.source_document }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="amount">
                                        { item.amount }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="competence">
                                        { item.competence }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!declarations?.exempt_incomes_declaration?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Exclusive_incomes Declaração</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>Tipoderendimentoexclusivo</th>
                                
                                
                                
                                <th>Fonte</th>
                                
                                
                                
                                <th>CPF/CNPJdafonte</th>
                                
                                
                                
                                <th>Valor</th>
                                
                                
                                
                                <th>Impostoretido</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {declarations.exclusive_incomes_declaration && Array.isArray(declarations.exclusive_incomes_declaration) &&
                              declarations.exclusive_incomes_declaration.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/exclusive_incomes/exclusive_incomes-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="income_type">
                                        { item.income_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="source_name">
                                        { item.source_name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="source_document">
                                        { item.source_document }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="amount">
                                        { item.amount }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="tax_withheld">
                                        { item.tax_withheld }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!declarations?.exclusive_incomes_declaration?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Assets Declaração</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>Grupo</th>
                                
                                
                                
                                <th>Código</th>
                                
                                
                                
                                <th>Discriminação</th>
                                
                                
                                
                                <th>País</th>
                                
                                
                                
                                <th>Inscrição/Registro</th>
                                
                                
                                
                                <th>Situaçãoem31/12anoanterior</th>
                                
                                
                                
                                <th>Situaçãoem31/12anoatual</th>
                                
                                
                                
                                <th>Alienadonoano</th>
                                
                                
                                
                                <th>Valordealienação</th>
                                
                                
                                
                                <th>CPF/CNPJdocomprador</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {declarations.assets_declaration && Array.isArray(declarations.assets_declaration) &&
                              declarations.assets_declaration.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/assets/assets-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="group_code">
                                        { item.group_code }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="item_code">
                                        { item.item_code }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="description_text">
                                        { item.description_text }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="country">
                                        { item.country }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="registration_number">
                                        { item.registration_number }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="value_previous_year">
                                        { item.value_previous_year }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="value_current_year">
                                        { item.value_current_year }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="disposed_in_year">
                                        { dataFormatter.booleanFormatter(item.disposed_in_year) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="disposal_value">
                                        { item.disposal_value }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="buyer_document">
                                        { item.buyer_document }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!declarations?.assets_declaration?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Debts Declaração</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>Código</th>
                                
                                
                                
                                <th>Nomedocredor</th>
                                
                                
                                
                                <th>CPF/CNPJdocredor</th>
                                
                                
                                
                                <th>Discriminação</th>
                                
                                
                                
                                <th>Saldoem31/12anoanterior</th>
                                
                                
                                
                                <th>Saldoem31/12anoatual</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {declarations.debts_declaration && Array.isArray(declarations.debts_declaration) &&
                              declarations.debts_declaration.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/debts/debts-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="debt_code">
                                        { item.debt_code }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="creditor_name">
                                        { item.creditor_name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="creditor_document">
                                        { item.creditor_document }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="description_text">
                                        { item.description_text }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="balance_previous_year">
                                        { item.balance_previous_year }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="balance_current_year">
                                        { item.balance_current_year }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!declarations?.debts_declaration?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Deductible_payments Declaração</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>Código</th>
                                
                                
                                
                                <th>Beneficiário</th>
                                
                                
                                
                                <th>CPF/CNPJdobeneficiário</th>
                                
                                
                                
                                <th>Valorpago</th>
                                
                                
                                
                                <th>Observações</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {declarations.deductible_payments_declaration && Array.isArray(declarations.deductible_payments_declaration) &&
                              declarations.deductible_payments_declaration.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/deductible_payments/deductible_payments-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="payment_code">
                                        { item.payment_code }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="beneficiary_name">
                                        { item.beneficiary_name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="beneficiary_document">
                                        { item.beneficiary_document }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="amount_paid">
                                        { item.amount_paid }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="notes">
                                        { item.notes }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!declarations?.deductible_payments_declaration?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Investment_positions Declaração</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>Ticker</th>
                                
                                
                                
                                <th>Nome</th>
                                
                                
                                
                                <th>Tipo</th>
                                
                                
                                
                                <th>Corretora/Exchange</th>
                                
                                
                                
                                <th>Quantidade</th>
                                
                                
                                
                                <th>Preçomédio/custo</th>
                                
                                
                                
                                <th>Valoranoanterior</th>
                                
                                
                                
                                <th>Valoranoatual</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {declarations.investment_positions_declaration && Array.isArray(declarations.investment_positions_declaration) &&
                              declarations.investment_positions_declaration.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/investment_positions/investment_positions-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="ticker">
                                        { item.ticker }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="asset_name">
                                        { item.asset_name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="asset_type">
                                        { item.asset_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="brokerage_name">
                                        { item.brokerage_name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="quantity">
                                        { item.quantity }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="avg_cost">
                                        { item.avg_cost }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="value_previous_year">
                                        { item.value_previous_year }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="value_current_year">
                                        { item.value_current_year }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!declarations?.investment_positions_declaration?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Trades Declaração</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>Data</th>
                                
                                
                                
                                <th>Ticker</th>
                                
                                
                                
                                <th>Operação</th>
                                
                                
                                
                                <th>Quantidade</th>
                                
                                
                                
                                <th>Preçounitário</th>
                                
                                
                                
                                <th>Taxas</th>
                                
                                
                                
                                <th>TipoIR</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {declarations.trades_declaration && Array.isArray(declarations.trades_declaration) &&
                              declarations.trades_declaration.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/trades/trades-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="trade_date">
                                        { dataFormatter.dateTimeFormatter(item.trade_date) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="ticker">
                                        { item.ticker }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="operation">
                                        { item.operation }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="quantity">
                                        { item.quantity }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="unit_price">
                                        { item.unit_price }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="fees">
                                        { item.fees }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="ir_operation_type">
                                        { item.ir_operation_type }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!declarations?.trades_declaration?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Monthly_capital_gains Declaração</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>Ano</th>
                                
                                
                                
                                <th>Mês</th>
                                
                                
                                
                                <th>Tipodeativo</th>
                                
                                
                                
                                <th>Ganhobruto</th>
                                
                                
                                
                                <th>Prejuízo</th>
                                
                                
                                
                                <th>Prejuízoacumulado</th>
                                
                                
                                
                                <th>Ganholíquido</th>
                                
                                
                                
                                <th>Alíquota</th>
                                
                                
                                
                                <th>Impostodevido</th>
                                
                                
                                
                                <th>DARFpago</th>
                                
                                
                                
                                <th>CódigoDARF</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {declarations.monthly_capital_gains_declaration && Array.isArray(declarations.monthly_capital_gains_declaration) &&
                              declarations.monthly_capital_gains_declaration.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/monthly_capital_gains/monthly_capital_gains-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="year">
                                        { item.year }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="month">
                                        { item.month }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="asset_type">
                                        { item.asset_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="gross_gain">
                                        { item.gross_gain }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="gross_loss">
                                        { item.gross_loss }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="carryforward_loss">
                                        { item.carryforward_loss }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="net_gain">
                                        { item.net_gain }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="tax_rate">
                                        { item.tax_rate }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="tax_due">
                                        { item.tax_due }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="darf_paid">
                                        { dataFormatter.booleanFormatter(item.darf_paid) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="darf_code">
                                        { item.darf_code }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!declarations?.monthly_capital_gains_declaration?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Risk_analyses Declaração</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>Scoregeral</th>
                                
                                
                                
                                <th>Fatores(JSON)</th>
                                
                                
                                
                                <th>Sugestões(JSON)</th>
                                
                                
                                
                                <th>Datadaanálise</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {declarations.risk_analyses_declaration && Array.isArray(declarations.risk_analyses_declaration) &&
                              declarations.risk_analyses_declaration.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/risk_analyses/risk_analyses-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="overall_score">
                                        { item.overall_score }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="factors_json">
                                        { item.factors_json }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="optimization_suggestions_json">
                                        { item.optimization_suggestions_json }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="analyzed_at">
                                        { dataFormatter.dateTimeFormatter(item.analyzed_at) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!declarations?.risk_analyses_declaration?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                
                
                
                
                
                <>
                    <p className={'block font-bold mb-2'}>Job_runs Declaração</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>Tipodejob</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                <th>Tentativa</th>
                                
                                
                                
                                <th>Entrada(JSON)</th>
                                
                                
                                
                                <th>Saída(JSON)</th>
                                
                                
                                
                                <th>Erro</th>
                                
                                
                                
                                <th>Início</th>
                                
                                
                                
                                <th>Fim</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {declarations.job_runs_declaration && Array.isArray(declarations.job_runs_declaration) &&
                              declarations.job_runs_declaration.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/job_runs/job_runs-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="job_type">
                                        { item.job_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="attempt">
                                        { item.attempt }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="input_json">
                                        { item.input_json }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="output_json">
                                        { item.output_json }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="error_message">
                                        { item.error_message }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="started_at">
                                        { dataFormatter.dateTimeFormatter(item.started_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="finished_at">
                                        { dataFormatter.dateTimeFormatter(item.finished_at) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!declarations?.job_runs_declaration?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                

                <BaseDivider />

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

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

export default DeclarationsView;