Merge branch 'administativePages' into 'dev'

Administative pages

See merge request kluppsoftware/smart-energia-web!97

package.json

@@ -23,6 +23,7 @@
     "@hookform/resolvers": "^2.9.1",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
+    "@material-ui/pickers": "^3.3.10",
     "@mui/icons-material": "^5.8.2",
     "@mui/material": "^5.6.4",
     "@mui/x-data-grid": "^5.11.0",
@@ -35,9 +36,11 @@
     "axios": "^0.27.2",
     "chart.js": "^3.7.1",
     "chartjs-plugin-datalabels": "^2.0.0",
+    "date-fns": "^2.28.0",
     "eslint-plugin-react": "^7.29.4",
     "eslit": "^6.0.0",
     "faker": "5.5.3",
+    "form-data": "^4.0.0",
     "fs-extra": "^10.1.0",
     "install": "^0.13.0",
     "next": "12.1.6",

src/components/graph/Chart.tsx

@@ -90,7 +90,7 @@ export default function Chart({ title, data1, data2, label, subtitle, dataset1,
       {
         label: dataset1? dataset1 : '2021',
         data: data1.map(value => value.custo_unit),
-        backgroundColor: '#255488'
+        backgroundColor: '#C2d5fb'
         // backgroundColor: (value, ctx) => {
         //   return data1[value.dataIndex]?.dad_estimado == false ? '#255488' : draw('diagonal-right-left', '#C2d5fb');
         // },
@@ -98,7 +98,7 @@ export default function Chart({ title, data1, data2, label, subtitle, dataset1,
       {
         label: dataset2? dataset2 : '2022',
         data: data2.map(value => value.custo_unit),
-        backgroundColor: '#255488'
+        backgroundColor: '#C2d5fb'
         // backgroundColor: (value, ctx) => {
         //   return data2[value.dataIndex]?.dad_estimado == false ? '#255488' : draw('diagonal-right-left', '#C2d5fb');
         // },

src/components/graph/Chart2.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { Bar, Line } from 'react-chartjs-2';
+import { Bar, Line, Chart as ChartJs } from 'react-chartjs-2';
 import {
   Chart as ChartJS,
   CategoryScale,
@@ -54,9 +54,7 @@ export default function Chart({ title, data1, data2, label, subtitle, dataset1,
     plugins: {
       datalabels: {
         display: true,
-        color: (value, ctx) => {
+        color: 'black',
-          return 'black'
-        },
         formatter: (value, ctx) => {
           let sum = 0;
           const dataArr = ctx.chart.data.datasets[0].data;
@@ -64,7 +62,7 @@ export default function Chart({ title, data1, data2, label, subtitle, dataset1,
               sum += data;
           });
           const percentage = data1[ctx.dataIndex].econ_percentual? (data1[ctx.dataIndex].econ_percentual*100).toFixed(0)+"%" : '';
-          const result = `  ${parseInt(value)!=0? parseInt(value).toLocaleString('pt-br') : ''}\n    ${parseInt(value)!=0? percentage : ''}`
+          const result = `  ${parseInt(value)!=0? percentage : ''}\n  ${parseInt(value)!=0? parseInt(value).toLocaleString('pt-br') : ''}`
 
           return value==null? null : result
         },
@@ -72,7 +70,7 @@ export default function Chart({ title, data1, data2, label, subtitle, dataset1,
         offset: 0,
         align: "end",
         font: {
-          size: !miniature? 15 : 10,
+          size: !miniature? 18 : 10,
         }
       },
       legend: {
@@ -86,10 +84,11 @@ export default function Chart({ title, data1, data2, label, subtitle, dataset1,
     },
   };
 
-  const data = {
+  const data: any = {
     labels,
     datasets: [
       {
+        type: 'bar',
         label: dataset1? dataset1 : '2021',
         data: data1.map(value => value.economia_acumulada? value.economia_acumulada : 0),
         backgroundColor: '#255488'
@@ -98,12 +97,25 @@ export default function Chart({ title, data1, data2, label, subtitle, dataset1,
         // },
       },
       {
+        type: 'bar',
         label: dataset2? dataset2 : '2022',
         data: data2.map(value => value.economia_acumulada? value.economia_acumulada : 0),
-        backgroundColor: '#255488'
+        // backgroundColor: '#255488'
         // backgroundColor: (value, ctx) => {
         //   return data2[value.dataIndex]?.dad_estimado == false ? '#255488' : draw('diagonal-right-left', '#C2d5fb');
         // },
+      },
+      {
+        type: 'line',
+        label: ['Acumulado'],
+        backgroundColor: '#255488',
+        data: [],
+      },
+      {
+        type: 'line',
+        label: ['Estimado'],
+        backgroundColor: draw('diagonal-right-left', '#C2d5fb'),
+        data: [],
       }
     ],
   }
@@ -117,10 +129,9 @@ export default function Chart({ title, data1, data2, label, subtitle, dataset1,
         />
       </RenderIf> */}
       <ChartTitle title={title} subtitle={subtitle} />
-      <Bar
+      <ChartJs
         options={options}
-        data={data}
+        data={data} type={'bar'} />
-      />
     </ChartView>
   )
 }

src/components/graph/LineBarChart2.tsx

@@ -105,7 +105,7 @@ export function LineBarChart2({ title, subtitle, data1, data2, data3, label, red
           dataArr.map(data => {
               sum += data;
           });
-          const result = `${parseInt(value).toLocaleString('pt-br')}`
+          const result = `${(parseInt(value)/1000).toLocaleString('pt-br')}`
 
           return value==null? null : result
         }
@@ -120,7 +120,7 @@ export function LineBarChart2({ title, subtitle, data1, data2, data3, label, red
     },
   };
 
-  const data = data2? {
+  const data: any = data2? {
     labels,
     datasets: [
       {
@@ -129,11 +129,13 @@ export function LineBarChart2({ title, subtitle, data1, data2, data3, label, red
         borderColor: red?
         '#f00' : '#0c9200',
         datalabels: {
-          backgroundColor: 'white'
+          backgroundColor: 'white',
+          borderRadius: 8,
+          opacity: .8
         },
         borderWidth: 2,
         fill: false,
-        data: data1.map(value => value.economia_mensal),
+        data: data1.map(value => value.economia_mensal/1000),
       },
       {
         type: 'bar' as const,
@@ -141,7 +143,7 @@ export function LineBarChart2({ title, subtitle, data1, data2, data3, label, red
         backgroundColor: (value, ctx) => {
           return hashurado? data1[value.dataIndex]?.dad_estimado == false? '#C2D5FB' : pattern.draw('diagonal', '#C2D5FB') : '#C2D5FB'
         },
-        data: data3.map(value => value.custo_cativo),
+        data: data3.map(value => value.custo_cativo/1000),
       },
       {
         type: 'bar' as const,
@@ -150,8 +152,20 @@ export function LineBarChart2({ title, subtitle, data1, data2, data3, label, red
         backgroundColor: (value, ctx) => {
           return hashurado? data1[value.dataIndex]?.dad_estimado == false? '#255488' : pattern.draw('diagonal', '#255488') : '#255488'
         },
-        data: data2.map(value => value.custo_livre),
+        data: data2.map(value => value.custo_livre/1000),
       },
+      {
+        type: 'line',
+        label: 'Acumulado',
+        backgroundColor: '#255488',
+        data: [],
+      },
+      {
+        type: 'line',
+        label: 'Estimado',
+        backgroundColor: pattern.draw('diagonal-right-left', '#C2d5fb'),
+        data: [],
+      }
     ],
   } : {
     labels,

src/components/graph/SingleBar.tsx

@@ -32,6 +32,9 @@ export function SingleBar({ title, subtitle, dataProps, label, dataset, barLabel
     responsive: true,
     scales: {
       x: {
+        font: {
+          size: 20
+        },
         grid: {
           display: false
         }
@@ -58,10 +61,10 @@ export function SingleBar({ title, subtitle, dataProps, label, dataset, barLabel
         display: true,
         color: barLabel? 'black' : "rgba(255, 255, 255, 0)",
         anchor: "end",
-        offset: -40,
+        offset: -60,
         align: "start",
         font: {
-          size: !miniature? 15 : 10
+          size: !miniature? 22 : 10
         }
       },
       legend: {

src/components/header/HeaderView.ts

@@ -21,7 +21,7 @@ export const HeaderView = styled.header`
 
     padding: 14px;
 
-    margin-right: 20px;
+    margin-left: 20px;
 
     p{
       color: white;

src/pages/aboutUs/index.tsx

@@ -20,7 +20,7 @@ export default function aboutUs({userName, text}) {
 
       <section dangerouslySetInnerHTML={{__html: text[0].about}}/>
       <article>
-        <aside style={{alignSelf: 'flex-end'}}>
+        <aside>
           <h2>Apoio a projetos sociais</h2>
           <div>
             <Image src='/assets/stamps/whiteStamp.png' width={200} height={200} />

src/pages/accumulatedSavings/index.tsx

@@ -32,7 +32,7 @@ export default function AccumulatedSavings({graphData, years, userName}: any) {
         <title>Smart Energia - Economia Bruta Mensal</title>
       </Head>
       <Header name={userName}>
-        <PageTitle title='Economia Bruta Mensal' subtitle='Economia Bruta Estimada e Acumulada Mensal - Valores em R$ mil' />
+        <PageTitle title='Economia Bruta Mensal' subtitle='Economia Bruta Estimada e Acumulada Mensal - Valores em R$ x mil' />
       </Header>
       <section>
         <Chart2 title='' subtitle=''

src/pages/administrative/industryInfo/index.tsx

@@ -11,6 +11,7 @@ import FormData from 'form-data';
 
 import Snackbar from '@mui/material/Snackbar';
 import MuiAlert, { AlertProps } from '@mui/material/Alert';
+import getAPIClient from '../../../services/ssrApi'
 
 const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
   props,
@@ -50,6 +51,14 @@ export default function industryInfo({userName, pdfUrl}: any) {
     })
   }
 
+  function handleDownloadPdf() {
+    api.get('/download').then(res => {
+      window.open(res.data.path);
+    }).catch(res => {
+      console.log(res)
+    })
+  }
+
   return (
     <IndustryInfoView>
       <Snackbar open={openSnackSuccess} autoHideDuration={4000} onClose={handleCloseSnack}>
@@ -75,7 +84,7 @@ export default function industryInfo({userName, pdfUrl}: any) {
       </div>
 
       <BasicButton onClick={() => handleCreateClient()} title='Atualizar'/>
-      <BasicButton onClick={() => window.open(pdfUrl)} title='Visualizar arquivo mais recente'/>
+      <BasicButton onClick={() => handleDownloadPdf()} title='Visualizar arquivo mais recente'/>
       <BasicButton onClick={() => console.log('')} title='Excluir último arquivo enviado'/>
 
       {/* <PDFViewer
@@ -89,15 +98,16 @@ export default function industryInfo({userName, pdfUrl}: any) {
 }
 
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
+  const apiClient = getAPIClient(ctx)
   const { ['@smartAuth-token']: token } = parseCookies(ctx)
   const { ['user-name']: userName } = parseCookies(ctx)
 
   let pdfUrl=[]
 
-  api.get('/download').then(res => {
+  apiClient.get('/download').then(res => {
     pdfUrl = res.data.path
   }).catch(res => {
-    console.log(res)
+    console.log('exception', res)
   })
 
   if (!token) {

src/pages/chartTelemetry/index.tsx

@@ -142,28 +142,7 @@ export default function chartTelemetry({userName}) {
           :
           <>
 
-          <RenderIf isTrue={discretization!=='1_hora'}>
+          <RenderIf isTrue={discretization!=='1_dia' && discretization!=='1_mes'}>
-            <div onClick={() => setOpenConsumoDiscretizado1(true)}>
-              <DiscretizedConsumptionChartLine title={
-                  discretization==='5_min'? 'Consumo discretizado em 5 minutos' :
-                  discretization==='15_min'? 'Consumo discretizado em 15 minutos' : discretization==='1_hora'? 'Consumo discretizado em 1 hora' : 'Consumo discretizado em 1 dia'
-                } subtitle='' data1={discretizedConsumptionDataReativa} dataset1='Demanda registrada'
-                label={discretizedConsumptionDataReativa.map(data => parseFloat(data.reativa).toFixed(3))} />
-            </div>
-            <Modal
-              open={openConsumoDiscretizado1}
-              onClose={handleCloseConsumoDiscretizado1}
-              aria-labelledby="modal-modal-title"
-              aria-describedby="modal-modal-description"
-            >
-              <Box sx={style}>
-                <DiscretizedConsumptionChartLine title={
-                  discretization==='5_min'? 'Consumo discretizado em 5 minutos' :
-                  discretization==='15_min'? 'Consumo discretizado em 15 minutos' : discretization==='1_hora'? 'Consumo discretizado em 1 hora' : 'Consumo discretizado em 1 dia'
-                } subtitle='' data1={discretizedConsumptionDataReativa} dataset1='Demanda registrada' label={discretizedConsumptionDataReativa.map(data => data.reativa)} />
-              </Box>
-            </Modal>
-
             <div onClick={() => setOpenConsumoDiscretizado2(true)}>
               <DiscretizedConsumptionChart title={
                   discretization==='5_min'? 'Consumo discretizado em 5 minutos' :
@@ -184,6 +163,27 @@ export default function chartTelemetry({userName}) {
                 } subtitle='' dataProps={discretizedConsumptionData} label={discretizedConsumptionData.map(value => value.minut)} dataset={'Consumo'} dataset1='Estimado' month/>
               </Box>
             </Modal>
+
+            <div onClick={() => setOpenConsumoDiscretizado1(true)}>
+              <DiscretizedConsumptionChartLine title={
+                  discretization==='5_min'? 'Consumo discretizado em 5 minutos' :
+                  discretization==='15_min'? 'Consumo discretizado em 15 minutos' : discretization==='1_hora'? 'Consumo discretizado em 1 hora' : 'Consumo discretizado em 1 dia'
+                } subtitle='' data1={discretizedConsumptionDataReativa} dataset1='Demanda registrada'
+                label={discretizedConsumptionDataReativa.map(data => parseFloat(data.reativa).toFixed(3))} />
+            </div>
+            <Modal
+              open={openConsumoDiscretizado1}
+              onClose={handleCloseConsumoDiscretizado1}
+              aria-labelledby="modal-modal-title"
+              aria-describedby="modal-modal-description"
+            >
+              <Box sx={style}>
+                <DiscretizedConsumptionChartLine title={
+                  discretization==='5_min'? 'Consumo discretizado em 5 minutos' :
+                  discretization==='15_min'? 'Consumo discretizado em 15 minutos' : discretization==='1_hora'? 'Consumo discretizado em 1 hora' : 'Consumo discretizado em 1 dia'
+                } subtitle='' data1={discretizedConsumptionDataReativa} dataset1='Demanda registrada' label={discretizedConsumptionDataReativa.map(data => data.reativa)} />
+              </Box>
+            </Modal>
           </RenderIf>
 
             <div onClick={() => setOpenDemandaContratada(true)}>

src/pages/dashboard/index.tsx

@@ -61,21 +61,21 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
       </Link>
 
       <section className='dashboard'>
-        <GraphCard title='Economia Bruta Anual' subtitle='Economia Bruta Estimada e Acumulada Anual - Valores em R$ mil'>
+        <GraphCard title='Economia Bruta Anual' subtitle='Economia Bruta Estimada e Acumulada Anual - Valores em R$ x mil'>
           <SingleBar title='' subtitle=''
           dataset='Consolidada'
           dataProps={grossAnualGraph}
           label={grossAnualYears} barLabel miniature/>
         </GraphCard>
 
-        <GraphCard title='Economia Bruta Mensal' subtitle='Economia Bruta Estimada e Acumulada Mensal - Valores em R$ mil' singleBar>
+        <GraphCard title='Economia Bruta Mensal' subtitle='Economia Bruta Estimada e Acumulada Mensal - Valores em R$ x mil' singleBar>
           <Chart2 title='' subtitle=''
           data1={grossMensalGraph.filter((value, index) => value.mes.slice(3, 8).includes('2021'))}
           data2={grossMensalGraph.filter((value, index) => value.mes.slice(3, 8).includes('2022'))}
           label={months} miniature/>
         </GraphCard>
 
-        <GraphCard title='Cativo x Livre Mensal' subtitle='Comparativo de Custo Estimado - Valores em R$ mil' singleBar>
+        <GraphCard title='Cativo x Livre Mensal' subtitle='Comparativo de Custo Estimado - Valores em R$ x mil' singleBar>
           <LineBarChart2 data1={acumulatedGraph} data2={acumulatedGraph} data3={acumulatedGraph}
           label={ConsumoEstimado.label} dataset1='Custo' dataset2='Cativo' dataset3='Livre'
           title='' subtitle='' barLabel hashurado miniature/>

src/pages/estimatedCost/index.tsx

@@ -19,7 +19,7 @@ export default function EstimatedCost({graphData, userName}: any) {
         <title>Smart Energia - Custos Estimados</title>
       </Head>
       <Header name={userName}>
-        <PageTitle title='Cativo x Livre Mensal' subtitle='Comparativo de Custo Estimado - Valores em R$ mil' />
+        <PageTitle title='Cativo x Livre Mensal' subtitle='Comparativo de Custo Estimado - Valores em R$ x mil' />
       </Header>
       <section>
         <LineBarChart2 data1={graphData} data2={graphData} data3={graphData}

src/pages/faq/index.tsx

@@ -2,6 +2,7 @@ import { GetServerSideProps } from 'next'
 import Head from 'next/head'
 import { parseCookies } from 'nookies'
 import React from 'react'
+import Banner from '../../components/banner/Banner'
 import CommonQuestionsCard from '../../components/faqQuestionsCard/FaqQuestionsCard'
 import Header from '../../components/header/Header'
 import PageTitle from '../../components/pageTitle/PageTitle'
@@ -19,6 +20,7 @@ export default function commonQuestions({faqData, userName}) {
       <Header name={userName}>
         <PageTitle title='Perguntas Frequentes' subtitle='Aqui estão algumas das perguntas que mais recebemos!' />
       </Header>
+      <Banner title='Perguntas Frequentes' subtitle='Aqui estão algumas das perguntas que mais recebemos!' imgSource='/assets/banners/faq1.png'/>
       <section className='CommonQuestionsSection' >
       {
         faqData.length<1?

src/pages/grossSavings/index.tsx

@@ -19,7 +19,7 @@ export default function GrossSavings({graphData, years, userName}: any) {
         <title>Smart Energia - Economia Acumulada</title>
       </Head>
       <Header name={userName}>
-        <PageTitle title='Economia Bruta Anual' subtitle='Economia Bruta Estimada e Acumulada Anual - Valores em R$ mil' />
+        <PageTitle title='Economia Bruta Anual' subtitle='Economia Bruta Estimada e Acumulada Anual - Valores em R$ x mil' />
       </Header>
       <section>
         <SingleBar title='' subtitle=''

src/pages/industryInfo/index.tsx

@@ -11,6 +11,7 @@ import { IndustryInfoView } from '../../styles/layouts/industryInfo/IndustryInfo
 import Snackbar from '@mui/material/Snackbar';
 import MuiAlert, { AlertProps } from '@mui/material/Alert';
 import { useRouter } from 'next/router'
+import Banner from '../../components/banner/Banner'
 
 const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
   props,
@@ -60,8 +61,9 @@ export default function industryInfo({userName}: any) {
       <Header name={userName}>
         <PageTitle title='Info Setorial' subtitle='Clique em "Baixar PDF", para fazer download do PDF' />
       </Header>
+      <Banner title='Info setorial' subtitle='Baixe o pdf para ver o info setorial' imgSource='/assets/banners/infoSetorial.jpg'/>
       <p>Um resumo das atualizações gerais do Setor Elétrico, com dados sobre geração consumo, demanda, meteorologia baseadas em informações do ONS, CCEE, ANEEL, 10 Maiores Jornais e Revistas e CPTEC</p>
-      <button onClick={() => handleDownloadPdf()}>Baixar PDF</button>
+      <button onClick={() => handleDownloadPdf()}>Clique aqui para baixar o arquivo em PDF</button>
 
     </IndustryInfoView>
   )

src/pages/notifications/index.tsx

@@ -8,6 +8,7 @@ import PageTitle from '../../components/pageTitle/PageTitle'
 import { api } from '../../services/api'
 import getAPIClient from '../../services/ssrApi'
 import { FaqView } from '../../styles/layouts/commonQuestions/FaqView'
+import Banner from '../../components/banner/Banner'
 
 export default function Notifications({notificationData, userName}: any) {
   return (
@@ -18,6 +19,7 @@ export default function Notifications({notificationData, userName}: any) {
       <Header name={userName}>
         <PageTitle title='Notificações' subtitle='Aqui estão as notificações publicadas para você!' />
       </Header>
+      <Banner title='Notificações' subtitle='Aqui estão as notificações publicadas para você!' imgSource='/assets/banners/notificacoes.jpg'/>
       <section className='CommonQuestionsSection' >
       {
         notificationData.length!=0?

src/pages/pld/index.tsx

@@ -5,18 +5,15 @@ import Select, { SelectChangeEvent } from '@mui/material/Select';
 import { GetServerSideProps } from 'next';
 import Head from 'next/head';
 import Link from 'next/link';
-import { useRouter } from 'next/router'
 import { parseCookies } from 'nookies';
 import React, { useEffect, useState } from 'react'
 
 import BasicButton from '../../components/buttons/basicButton/BasicButton';
-import { BasicButtonView } from '../../components/buttons/basicButton/BasicButtonView';
 import { LineBarChart } from '../../components/graph/LineBarChart';
 import LineChart from '../../components/graph/LineChart';
 import Header from '../../components/header/Header'
 import PageTitle from '../../components/pageTitle/PageTitle';
 import { api } from '../../services/api';
-import { EconomiaAcumulada } from '../../services/economiaAcumulada';
 import { EvolucaoPld } from '../../services/evolucaoPld';
 import getAPIClient from '../../services/ssrApi';
 import { GoBack, PldGraphView, PldTableView } from '../../styles/layouts/pld/PldView'
@@ -36,9 +33,9 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
   const year_Month = `0${dateFormated.getMonth()}/${dateFormated.getFullYear()}`
 
   const [date, setDate] = useState(`${dateFormated.getFullYear()}-${dateFormated.getUTCMonth()+1}-${dateFormated.getUTCDate()}`);
-  const [select, setSelect] = useState('NORDESTE');
+  const [select, setSelect] = useState('SUDESTE');
   const [page, setPage] = useState<string>('table')
-  const [day, setDay] = useState<string>(null)
+  const [month, setMonth] = useState<string>((dateFormated.getUTCMonth()+1).toString())
 
   const [dataByDay, setDataByDay] = useState([])
 
@@ -51,7 +48,7 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
     setSelect(event.target.value);
   };
   const handleChangeDay = (event: SelectChangeEvent) => {
-    setDay(event.target.value);
+    setMonth(event.target.value);
   };
 
   function getDataByDay() {
@@ -59,7 +56,7 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
       "limit": 20,
       "offset": 0,
       "filters": [
-          {"type" : "=", "field" : "mes_ref", "value": `${day}/2022`, "row": true},
+          {"type" : "=", "field" : "mes_ref", "value": `${month}/2022`, "row": true},
           {"type" : "=", "field" : "pld.submercado", "value": select}
         ],
       "order": [{ "field": "day_calc", "direction": "asc" }]
@@ -175,19 +172,18 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
   useEffect(() => {
     getDataByHour()
     getDataByDay()
-  }, [date, day, select])
+    console.log(month)
+  }, [date, month, select])
 
   return (
-    <main style={{
+    <main style={{width: '100%',}}>
-      width: '100%',
-    }}>
       <Head>
         <title>Smart Energia - PLD</title>
       </Head>
       <RenderIf isTrue={page==='table'? true : false}>
         <Header name={userName}>
           <Link href='/dashboard' >{'< Voltar para Visão Geral'}</Link>
-          <PageTitle title='Tabela de consumo PLD' subtitle=''/>
+          <PageTitle title='Tabela de consumo PLD' subtitle='Tabela de consumo PLD'/>
         </Header>
         <PldTableView>
           <table className="tg">
@@ -211,14 +207,21 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
                   return <>
                     <tr className={data.year_month_formatted==year_Month? 'actual' : ''}>
                       <td className='tg-gceh'>{data.year_month_formatted}</td>
-                      <td className={`tg-uulg ${handleColorNorte(parseFloat(data.norte), 'nordeste')}`}>{parseFloat(data.nordeste).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
+                      <td className={`tg-uulg`}>{parseFloat(data.nordeste).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
-                      <td className={`tg-gceh ${handleColorNorte(parseFloat(data.norte), 'norte')}`}>{parseFloat(data.norte).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
+                      <td className={`tg-gceh`}>{parseFloat(data.norte).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
-                      <td className={`tg-gceh ${handleColorNorte(parseFloat(data.norte), 'sudeste')}`}>{parseFloat(data.sudeste).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
+                      <td className={`tg-gceh`}>{parseFloat(data.sudeste).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
-                      <td className={`tg-uulg ${handleColorNorte(parseFloat(data.norte), 'sul')}`}>{parseFloat(data.sul).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
+                      <td className={`tg-uulg`}>{parseFloat(data.sul).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
                     </tr>
                   </>
                 })
               }
+              <tr>
+                <td className='tg-gceh'></td>
+                <td className={`tg-uulg`}></td>
+                <td className={`tg-gceh`}></td>
+                <td className={`tg-gceh`}></td>
+                <td className={`tg-uulg`}></td>
+              </tr>
               {
                 tableData.result.map((data, index) => {
                   if (index === 0) {
@@ -263,7 +266,6 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
           }} title='Download'/>
           </div>
           <section>
-
             <article onClick={() => setPage('perMouth')}>
               <p>Valores Diários</p>
             </article>
@@ -275,8 +277,10 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
       </RenderIf>
 
       <RenderIf isTrue={page==='perMouth'? true : false}>
-        <GoBack onClick={() => setPage('table')}>{'< Voltar para tabela PLD'}</GoBack>
+        <Header name={userName}>
-        <PageTitle title='Resumo PLD - Diários' subtitle='Evolução PLD (R$/MWh)'/>
+          <GoBack onClick={() => setPage('table')}>{'< Voltar para tabela PLD'}</GoBack>
+          <PageTitle title='Resumo PLD - Diários' subtitle='Evolução PLD (R$/MWh)'/>
+        </Header>
         <PldGraphView>
           <section className='toolsbar'>
             <div className='select'>
@@ -306,7 +310,7 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
             }}>
               <InputLabel id="demo-simple-select-label">Mês</InputLabel>
               <Select
-                  value={day}
+                  value={month}
                   onChange={handleChangeDay}
                   displayEmpty
                   placeholder='dia'
@@ -328,18 +332,21 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
           </section>
           <LineBarChart
           data1={dataByDay} data3={dataByDay}
-          dataset1={'Economia'} dataset2={'barra1'} dataset3={'2021'}
+          dataset1={'Média'} dataset2={'barra1'} dataset3={'Diario'}
           label={EvolucaoPld.label}
           title='' subtitle='' />
         </PldGraphView>
       </RenderIf>
 
       <RenderIf isTrue={page==='perDate'? true : false}>
-        <GoBack onClick={() => setPage('table')}>{'< Voltar para tabela PLD'}</GoBack>
+        <Header name={userName}>
+          {/* <Link href='/dashboard' >{'< Voltar para Visão Geral'}</Link> */}
+          <GoBack onClick={() => setPage('table')}>{'< Voltar para tabela PLD'}</GoBack>
+          <PageTitle title='Resumo PLD - Horas' subtitle='Gráfico de resumo PLD - Horas (Média, Diário)'/>
+        </Header>
         <PldGraphView>
-          <PageTitle title='Resumo PLD - Horas' subtitle=''/>
           <section className='toolsbar'>
-            <input type="date" data-date="" data-date-format="DD MMMM YYYY" value={date} onChange={(value) => setDate(value.target.value)}/>
+            <input type="date" data-date={date} data-date-format="DD MMMM YYYY" value={date} onChange={(value) => setDate(value.target.value)}/>
           </section>
           <LineChart data1={nordeste} data2={norte} data3={sudeste} data4={sul}
           dataset1='NORDESTE' dataset2='NORTE' dataset3='SUDESTE' dataset4='SUL'

src/pages/resumoOperacao/index.tsx

@@ -139,8 +139,8 @@ export default function ResumoOperacao({tableData, clientsData, userName, client
             <th className='tg-8oo6'>Mês </th>
             <th className='tg-8oo6'>Unidade </th>
             <th className='tg-8oo6'>Operação</th>
-            <th className='tg-8oo6'>Contraparte</th>
             <th className='tg-8oo6'>Montante (MWh)</th>
+            <th className='tg-8oo6'>Contraparte</th>
             <th className='tg-8oo6'>ValorNF/Crédito(R$)</th>
             <th className='tg-8oo6'>Preço(R$/MWh)</th>
           </tr>
@@ -157,11 +157,11 @@ export default function ResumoOperacao({tableData, clientsData, userName, client
                 <tr>
                   <td key={index} className='tg-gceh'>{value.mes}</td>
                   <td key={index} className='tg-gceh'>{value.cod_smart_unidade}</td>
-                  <td key={index} className='tg-uulg'>{value.operacao}</td>
+                  <td key={index} className='tg-gceh'>{value.operacao}</td>
-                  <td key={index} className='tg-gceh'>{value.contraparte}</td>
                   <td key={index} className='tg-gceh'>{parseFloat(value.montante_nf).toLocaleString('pt-br')}</td>
+                  <td key={index} className='tg-gceh'>{value.contraparte}</td>
                   <td key={index} className='tg-gceh'>{parseFloat(value.preco_nf).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
-                  <td key={index} className='tg-uulg'>{parseFloat(value.nf_c_icms).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
+                  <td key={index} className='tg-gceh'>{parseFloat(value.nf_c_icms).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
                 </tr>
               </>
             })

src/pages/telemetria/index.tsx

@@ -287,6 +287,7 @@ export default function Telemetria({userName, clients}: any) {
               <MenuItem value="15_min">15 minutos</MenuItem>
               <MenuItem value="1_hora">1 hora</MenuItem>
               <MenuItem value="1_dia">1 dia</MenuItem>
+              <MenuItem value="1_mes">1 mês</MenuItem>
             </Select>
           </FormControl>
         </div>

src/styles/layouts/aboutUs/AboutUsView.ts

@@ -3,16 +3,7 @@ import styled from "styled-components";
 export const AboutUsView = styled.main`
   width: 100%;
 
-  ul {
+  font-weight: 300;
-    list-style: none;
-
-    li {
-      display: flex;
-      margin-bottom: 8px;
-
-      font-size: 98.98%;
-    }
-  }
 
   article {
     display: flex;
@@ -20,6 +11,9 @@ export const AboutUsView = styled.main`
     align-items: center;
 
     aside {
+      position: absolute;
+      margin-bottom: 150px;
+
       display: flex;
       justify-content: center;
       align-items: center;

src/styles/layouts/clients/ClientsView.ts

@@ -6,19 +6,6 @@ export const ClientsView = styled.main`
 
   width: 100%;
 
-  section {
-    display: flex;
-
-    width: 100%;
-
-    :nth-child(3) {
-      justify-content: space-between;
-
-      width: 18rem;
-
-      margin: 45px 0 22px 0;
-    }
-  }
   .btn2{
       background: #254F7F;
       border-radius: 8px;

src/styles/layouts/pld/PldView.ts

@@ -155,7 +155,7 @@ export const PldTableView = styled.main`
   }
 
   .btnDownload{
-    margin-top:6px;
+    margin-top: 25px;
   }
 `
 
@@ -169,6 +169,13 @@ export const PldGraphView = styled.main`
 
   width: 100%;
 
+  .MuiOutlinedInput-input {
+    height: 30px;
+
+    outline: none;
+    border: none;
+  }
+
   .select {
     width: 20rem;
   }

yarn.lock

@@ -778,6 +778,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.6.0":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.6.tgz#6a1ef59f838debd670421f8c7f2cbb8da9751580"
+  integrity sha512-t9wi7/AW6XtKahAe20Yw0/mMljKq0B1r2fPdvaAdV/KPDZewFXdaaa6K7lxmZBZ8FBNpCiAT6iHPmd6QO9bKfQ==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.16.7":
   version "7.16.7"
   resolved "https://registry.npmjs.org/@babel/template/-/template-7.16.7.tgz"
@@ -812,6 +819,11 @@
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9"
 
+"@date-io/core@1.x":
+  version "1.3.13"
+  resolved "https://registry.yarnpkg.com/@date-io/core/-/core-1.3.13.tgz#90c71da493f20204b7a972929cc5c482d078b3fa"
+  integrity sha512-AlEKV7TxjeK+jxWVKcCFrfYAk8spX9aCyiToFIiLPtfQbsjmRGLIhb5VZgptQcJdHtLXo7+m0DuurwFgUToQuA==
+
 "@date-io/core@^2.14.0":
   version "2.14.0"
   resolved "https://registry.yarnpkg.com/@date-io/core/-/core-2.14.0.tgz#03e9b9b9fc8e4d561c32dd324df0f3ccd967ef14"
@@ -1021,6 +1033,18 @@
   dependencies:
     "@babel/runtime" "^7.4.4"
 
+"@material-ui/pickers@^3.3.10":
+  version "3.3.10"
+  resolved "https://registry.yarnpkg.com/@material-ui/pickers/-/pickers-3.3.10.tgz#f1b0f963348cc191645ef0bdeff7a67c6aa25485"
+  integrity sha512-hS4pxwn1ZGXVkmgD4tpFpaumUaAg2ZzbTrxltfC5yPw4BJV+mGkfnQOB4VpWEYZw2jv65Z0wLwDE/piQiPPZ3w==
+  dependencies:
+    "@babel/runtime" "^7.6.0"
+    "@date-io/core" "1.x"
+    "@types/styled-jsx" "^2.2.8"
+    clsx "^1.0.2"
+    react-transition-group "^4.0.0"
+    rifm "^0.7.0"
+
 "@material-ui/styles@^4.11.5":
   version "4.11.5"
   resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.5.tgz#19f84457df3aafd956ac863dbe156b1d88e2bbfb"
@@ -1553,6 +1577,13 @@
     "@types/react" "*"
     csstype "^3.0.2"
 
+"@types/styled-jsx@^2.2.8":
+  version "2.2.9"
+  resolved "https://registry.yarnpkg.com/@types/styled-jsx/-/styled-jsx-2.2.9.tgz#e50b3f868c055bcbf9bc353eca6c10fdad32a53f"
+  integrity sha512-W/iTlIkGEyTBGTEvZCey8EgQlQ5l0DwMqi3iOXlLs2kyBwYTXHKEiU6IZ5EwoRwngL8/dGYuzezSup89ttVHLw==
+  dependencies:
+    "@types/react" "*"
+
 "@types/yup@^0.29.14":
   version "0.29.14"
   resolved "https://registry.yarnpkg.com/@types/yup/-/yup-0.29.14.tgz#754f1dccedcc66fc2bbe290c27f5323b407ceb00"
@@ -2018,6 +2049,11 @@ clone@^1.0.2:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
 
+clsx@^1.0.2:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.0.tgz#b0e415ea7537dbac01b169c5cec1caeb11d86566"
+  integrity sha512-EPRP7XJsM1y0iCU3Z7C7jFKdQboXSeHgEfzQUTlz7m5NP3hDrlz48aUsmNGp4pC+JOW9WA3vIRqlYuo/bl4Drw==
+
 clsx@^1.0.4, clsx@^1.1.0, clsx@^1.1.1:
   version "1.1.1"
   resolved "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz"
@@ -2155,6 +2191,11 @@ damerau-levenshtein@^1.0.7:
   version "1.0.8"
   resolved "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz"
 
+date-fns@^2.28.0:
+  version "2.28.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.28.0.tgz#9570d656f5fc13143e50c975a3b6bbeb46cd08b2"
+  integrity sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==
+
 debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.2, debug@^4.3.3, debug@^4.3.4:
   version "4.3.4"
   resolved "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz"
@@ -2632,6 +2673,7 @@ follow-redirects@^1.14.9:
 form-data@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
+  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
   dependencies:
     asynckit "^0.4.0"
     combined-stream "^1.0.8"
@@ -4164,7 +4206,7 @@ react-pdf-thumbnail@^0.1.0:
   dependencies:
     pdfjs-dist "^2.7.570"
 
-react-transition-group@^4.4.0, react-transition-group@^4.4.2:
+react-transition-group@^4.0.0, react-transition-group@^4.4.0, react-transition-group@^4.4.2:
   version "4.4.2"
   resolved "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz"
   dependencies:
@@ -4321,6 +4363,13 @@ rifm@^0.12.1:
   version "0.12.1"
   resolved "https://registry.yarnpkg.com/rifm/-/rifm-0.12.1.tgz#8fa77f45b7f1cda2a0068787ac821f0593967ac4"
 
+rifm@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/rifm/-/rifm-0.7.0.tgz#debe951a9c83549ca6b33e5919f716044c2230be"
+  integrity sha512-DSOJTWHD67860I5ojetXdEQRIBvF6YcpNe53j0vn1vp9EUb9N80EiZTxgP+FkDKorWC8PZw052kTF4C1GOivCQ==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+
 rimraf@^3.0.0, rimraf@^3.0.2:
   version "3.0.2"
   resolved "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz"