Merge branch 'fix/chartsFixs' into 'dev'

add changes

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

src/components/buttons/basicButton/BasicButtonView.ts

@@ -8,7 +8,9 @@ export const BasicButtonView = styled.button`
 
   width: 140px;
   height: 45px;
+
   cursor: pointer;
+
   background: #254F7F;
   border-radius: 8px;
   border-style: none;
@@ -16,6 +18,13 @@ export const BasicButtonView = styled.button`
   font-family: 'Poppins';
   font-size: 90%;
 
+  transition: all 350ms ease-in;
+
+  :hover {
+    transform: scale(1.02);
+    opacity: 0.9;
+    box-shadow: rgb(0, 0, 0, 0.2) 0px 2px 4px -1px;
+  }
 
   color: #FFFFFF;
 `

src/components/buttons/gradientButton/GradientButton.tsx

@@ -21,6 +21,9 @@ export default function GradientButton({ title, description, orange, purple, gre
 
   return (
     <GradientButtonView color={orange? 'orange' : purple? 'purple' : green? 'green' : 'orange'} onClick={() => handleClick()}>
+      <svg>
+        <rect x="0" y="0" fill="none" width="100%" height="100%"/>
+      </svg>
       <p></p>
       <p>{description}</p>
     </GradientButtonView>

src/components/buttons/gradientButton/GradientButtonView.ts

@@ -6,7 +6,6 @@ export const GradientButtonView = styled.button`
   align-items: center;
 
   flex-direction: column;
-  border-radius: 2px;
 
   width: 30%;
   min-width: 240px;
@@ -30,8 +29,43 @@ export const GradientButtonView = styled.button`
 
   box-shadow: 0.5px 3px 10px rgba(119, 119, 119, 0.1);
 
+  border-radius: 8px!important;
   border-style: none;
 
+  :hover {
+    transition: all 0.2s linear;
+    transform: scale(1.1);
+  }
+
+  svg {
+    width: 404px;
+    left: 0;
+    position: absolute;
+    top: 0;
+    height: 110px;
+  }
+
+  rect {
+    fill: none;
+    stroke: #fff;
+    stroke-width: 2;
+    stroke-dasharray: 422, 0;
+    transition: all 0.35s linear;
+  }
+
+  :hover {
+    background: rgba($red, 0);
+    letter-spacing: 1px;
+
+
+    rect {
+      stroke-width: 5;
+      stroke-dasharray: 15, 310;
+      stroke-dashoffset: 48;
+      transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
+    }
+  }
+
   * {
     margin: 0;
     padding: 0;

src/components/graph/cativoXLivreChart/index.tsx

@@ -60,9 +60,7 @@ ChartJS.register(
 interface LineBarChartInterface {
   title: string,
   subtitle: string,
-  data1: any,
+  chartData: any,
-  data2?: any,
-  data3: any,
   red?: any,
   label: any,
   dataset1?: string,
@@ -73,7 +71,7 @@ interface LineBarChartInterface {
   miniature?: boolean | undefined,
 }
 
-export function CativoXLivreChart({ title, subtitle, data1, data2, data3, label, red, dataset1, dataset2, dataset3, barLabel, hashurado, miniature }: LineBarChartInterface) {
+export function CativoXLivreChart({ title, subtitle, chartData, label, red, dataset1, dataset2, dataset3, barLabel, hashurado, miniature }: LineBarChartInterface) {
   const chartRef = useRef<ChartJS>(null);
 
   const labels = label
@@ -109,7 +107,7 @@ export function CativoXLivreChart({ title, subtitle, data1, data2, data3, label,
           dataArr.map(data => {
               sum += data;
           });
-          const result = `${(parseInt(value)/1000).toLocaleString('pt-br')}`
+          const result = `${(parseFloat(value)).toLocaleString('pt-br')}`
 
           return value==null? null : result
         }
@@ -138,36 +136,48 @@ export function CativoXLivreChart({ title, subtitle, data1, data2, data3, label,
         },
         borderWidth: 2,
         fill: false,
-        data: data1.map(value => value.economia_mensal),
+        data: chartData.map(value => value.economia_mensal),
       },
       {
         type: 'bar' as const,
         label: 'Cativo',
         backgroundColor: (value, ctx) => {
-          return hashurado? data1[value.dataIndex]?.dad_estimado == false? '#C2D5FB' : pattern.draw('diagonal', '#C2D5FB') : '#C2D5FB'
+          return '#C2D5FB'
         },
-        data: data3.map(value => value.custo_cativo),
+        data: chartData.map(value => {
+          if (!value.dad_estimado)
+          return value.custo_cativo
+        }),
       },
       {
         type: 'bar' as const,
         label: 'Livre',
         // backgroundColor: '#255488',
         backgroundColor: (value, ctx) => {
-          return hashurado? data1[value.dataIndex]?.dad_estimado == false? '#255488' : pattern.draw('diagonal', '#255488') : '#255488'
+          return '#255488'
         },
-        data: data2.map(value => value.custo_livre),
+        data: chartData.map(value => {
+          if (!value.dad_estimado)
+          return value.custo_livre
+        }),
       },
       {
-        type: 'line',
+        type: 'bar',
-        label: 'Est. Livre',
-        backgroundColor: pattern.draw('diagonal', '#255488'),
-        data: [],
-      },
-      {
-        type: 'line',
         label: 'Est. Cativo',
         backgroundColor: pattern.draw('diagonal', '#C2D5FB'),
-        data: [],
+        data: chartData.map(value => {
+          if (value.dad_estimado)
+          return value.custo_cativo
+        }),
+      },
+      {
+        type: 'bar',
+        label: 'Est. Livre',
+        backgroundColor: pattern.draw('diagonal', '#255488'),
+        data: chartData.map(value => {
+          if (value.dad_estimado)
+          return value.custo_livre
+        }),
       }
     ],
   }

src/components/graph/costIndicatorChart/index.tsx

@@ -49,6 +49,7 @@ export default function CostIndicatorChart({ title, data1, data2, label, subtitl
         }
       },
       y: {
+        stacked: true,
         grid: {
           display: false
         }
@@ -91,17 +92,23 @@ export default function CostIndicatorChart({ title, data1, data2, label, subtitl
       {
         label: '2021',
         data: data1.map(value => value.custo_unit>0? value.custo_unit : null),
-        backgroundColor: '#C2d5fb'
+        // backgroundColor: '#C2d5fb'
-        // backgroundColor: (value, ctx) => {
+        backgroundColor: (value, ctx) => {
-        //   return data1[value.dataIndex]?.dad_estimado == false ? '#255488' : draw('diagonal-right-left', '#255488');
+          if (value.dad_estimado)
-        // },
+            return draw('diagonal-right-left', '#C2d5fb');
+          else
+            return '#C2d5fb'
+        },
       },
       {
         label: '2022',
         data: data2.map(value => value.custo_unit>0? value.custo_unit : null),
         // backgroundColor: '#255488'
         backgroundColor: (value, ctx) => {
-          return data2[value.dataIndex]?.dad_estimado == false ? '#255488' : draw('diagonal-right-left', '#255488');
+          if (value.dad_estimado)
+            return draw('diagonal-right-left', '#255488');
+          else
+            return '#255488'
         },
       }
     ],

src/components/graph/grossAnualChart/GrossAnualChart.tsx

@@ -2,7 +2,7 @@ import { BarElement, CategoryScale, Chart as ChartJS, Legend, LinearScale, Title
 import ChartDataLabels from 'chartjs-plugin-datalabels';
 import { draw, generate } from 'patternomaly'
 import React from 'react';
-import { Bar } from 'react-chartjs-2';
+import { Bar, Chart } from 'react-chartjs-2';
 
 import { GrossAnualChartView } from './GrossAnualChartView';
 import ChartTitle from '../ChartTitle';
@@ -40,11 +40,13 @@ export function GrossAnulChart({ title, subtitle, dataProps, label, dataset, bar
 
     return spaces
   }
-  const options: object = {
+
+  const options: any = {
     responsive: true,
     is3D: true,
     scales: {
       x: {
+        grouped: false,
         font: {
           size: 20
         },
@@ -102,7 +104,7 @@ export function GrossAnulChart({ title, subtitle, dataProps, label, dataset, bar
 
   let labels: string[];
   if (bruta) {
-    labels = label.map(value => value.replace('2021', 'até 2021'))
+    labels = label.map(value => value.replace('2021', 'Até 2021'))
   } else {
     labels = label
   }
@@ -111,26 +113,29 @@ export function GrossAnulChart({ title, subtitle, dataProps, label, dataset, bar
     labels,
     datasets: [
       {
-        label: 'Estimado',
+        type: 'bar',
-        data: [],
-        backgroundColor: '#C2d5fb',
-      },
-      {
         label: dataset,
         data: dataProps.map((value, index) => {
+          if (!value.dad_estimado)
           return parseFloat(value.economia_acumulada).toFixed(2)
         }),
         backgroundColor: (value, ctx) => {
-          return dataProps[value.dataIndex]?.dad_estimado == false ? '#255488' : draw('diagonal-right-left', '#C2d5fb');
+          return '#255488'
         },
       },
       {
-        label: '',
+        type: 'bar',
-        data: [dataProps[0]?.economia_acumulada?dataProps[0].economia_acumulada*1.1 : 1],
+        label: 'Estimado',
-        backgroundColor: 'transparent',
+        data: dataProps.map((value, index) => {
+          if (value.dad_estimado)
+          return parseFloat(value.economia_acumulada).toFixed(2)
+        }),
         datalabels: {
           display: false
-        }
+        },
+        backgroundColor: (value, ctx) => {
+          return draw('diagonal-right-left', '#C2d5fb');
+        },
       },
     ],
   }
@@ -138,7 +143,7 @@ export function GrossAnulChart({ title, subtitle, dataProps, label, dataset, bar
   return (
     <GrossAnualChartView>
       <ChartTitle title={title} subtitle={subtitle} />
-      <Bar options={options} data={data} />
+      <Chart options={options} data={data} type='bar'/>
     </GrossAnualChartView>
   )
 }

src/components/graph/grossMensalChart/GrossMensalChart.tsx

@@ -11,6 +11,8 @@ import {
   Legend
 } from 'chart.js'
 
+import document from 'next/document';
+
 import { draw, generate } from 'patternomaly'
 
 import { GrossMensalChartView } from './GrossMensalChartView';
@@ -79,7 +81,7 @@ export default function GrossMensalChart({ title, data1, data2, label, subtitle,
               sum += data;
           });
           const percentage = data1[ctx.dataIndex]?.econ_percentual? (data1[ctx.dataIndex].econ_percentual*100).toFixed(0)+"%" : '';
-          const result = `⠀${spacement(parseInt(value+3).toLocaleString('pt-br'))}${parseInt(value)!=0? percentage : ''}\n${parseInt(value)!=0? parseInt(value).toLocaleString('pt-br') : ''}`
+          const result = `${spacement(parseInt(value+3).toLocaleString('pt-br'))}${parseInt(value)!=0? percentage : ''}\n${parseInt(value)!=0? parseInt(value).toLocaleString('pt-br') : ''}`
 
           return value==null? null : result
         },

src/components/sidebar/Sidebar.tsx

@@ -110,15 +110,15 @@ export default function Sidebar() {
                 <Link href='/estimatedCost'><li className={router.pathname=='/estimatedCost'? 'actualPathDrawer' : null}>Cativo x Livre Mensal</li></Link>
                 <Link href='/costIndicator'><li className={router.pathname=='/costIndicator'? 'actualPathDrawer' : null}>Custo R$/MWh</li></Link>
               </div>
-            <Link href='/telemetria'><li className={router.pathname=='/telemetria'? 'actualPath' : null}><Image src='/assets/sidebar/telemetryIcon.svg' width={25} height={25} />{'Telemetria >'}</li></Link>
+            <Link href='/telemetria'><li className={router.pathname=='/telemetria'? 'actualPath' : null}><Image src='/assets/sidebar/telemetryIcon.svg' width={25} height={25} />{'Telemetria'}</li></Link>
             <Link href='/resumoOperacao'><li className={router.pathname=='/resumoOperacao'? 'actualPath' : null} ><Image src='/assets/sidebar/summaryOperationsIcon.svg' width={25} height={25} />{'Resumo de Op. '}</li></Link>
-            <Link href='/news'><li className={router.pathname=='/news'? 'actualPath' : null}><Image src='/assets/sidebar/newsIcon.svg' width={25} height={25} />{'Notícias >'}</li></Link>
+            <Link href='/news'><li className={router.pathname=='/news'? 'actualPath' : null}><Image src='/assets/sidebar/newsIcon.svg' width={25} height={25} />{'Notícias'}</li></Link>
-            <Link href='/pld'><li className={router.pathname=='/pld'? 'actualPath' : null}><Image src='/assets/sidebar/newsIcon.svg' width={25} height={25} />{'PLD >'}</li></Link>
+            <Link href='/pld'><li className={router.pathname=='/pld'? 'actualPath' : null}><Image src='/assets/sidebar/newsIcon.svg' width={25} height={25} />{'PLD'}</li></Link>
-            <Link href='/industryInfo'><li className={router.pathname=='/industryInfo'? 'actualPath' : null}><Image src='/assets/sidebar/sectorialInfoIcon.svg' width={25} height={25} />{'Info Setorial >'}</li></Link>
+            <Link href='/industryInfo'><li className={router.pathname=='/industryInfo'? 'actualPath' : null}><Image src='/assets/sidebar/sectorialInfoIcon.svg' width={25} height={25} />{'Info Setorial'}</li></Link>
             {/* <Link href='/consumption'><li className={router.pathname=='/consumption'? 'actualPath' : null} ><Image src='/assets/sidebar/consumptionIcon.svg' width={25} height={25} />{'Consumo'}</li></Link> */}
-            <Link href='/notifications'><li className={router.pathname=='/notifications'? 'actualPath' : null}><Image src='/assets/sidebar/notificationsIcon.svg' width={25} height={25} />{'Notificações >'}<div className='notification' style={{display: notificationsCount<=0||notificationsCount===undefined? 'none' : 'inherit'}}><p>{notificationsCount}</p></div></li></Link>
+            <Link href='/notifications'><li className={router.pathname=='/notifications'? 'actualPath' : null}><Image src='/assets/sidebar/notificationsIcon.svg' width={25} height={25} />{'Notificações'}<div className='notification' style={{display: notificationsCount<=0||notificationsCount===undefined? 'none' : 'inherit'}}><p>{notificationsCount}</p></div></li></Link>
-            <Link href='/aboutUs'><li className={router.pathname=='/aboutUs'? 'actualPath' : null}><Image src='/assets/sidebar/aboutUs.svg' width={25} height={25} />{'Sobre Nós >'}</li></Link>
+            <Link href='/aboutUs'><li className={router.pathname=='/aboutUs'? 'actualPath' : null}><Image src='/assets/sidebar/aboutUs.svg' width={25} height={25} />{'Sobre Nós'}</li></Link>
-            <Link href='/faq'><li className={router.pathname=='/faq'? 'actualPath' : null}><Image src='/assets/sidebar/saqIcon.svg' width={25} height={25} />{'FAQ >'}</li></Link>
+            <Link href='/faq'><li className={router.pathname=='/faq'? 'actualPath' : null}><Image src='/assets/sidebar/saqIcon.svg' width={25} height={25} />{'FAQ'}</li></Link>
             <button onClick={handleOpen}><Image src='/assets/logout.svg' width={25} height={25} />{'Sair'}</button>
             <Modal
             open={open}

src/pages/costIndicator/index.tsx

@@ -1,16 +1,23 @@
 import { GetServerSideProps } from 'next'
 import Head from 'next/head'
 import { parseCookies } from 'nookies'
-import React from 'react'
+import React, { useState } from 'react'
+
+// material ui imports
+import MenuItem from '@mui/material/MenuItem';
+import InputLabel from '@mui/material/InputLabel';
+import FormControl from '@mui/material/FormControl';
+import Select from '@mui/material/Select';
 
-import Chart from '../../components/graph/Chart'
 import CostIndicatorChart from '../../components/graph/costIndicatorChart'
 import Header from '../../components/header/Header'
 import PageTitle from '../../components/pageTitle/PageTitle'
 import getAPIClient from '../../services/ssrApi'
 import { CostIndicatorView } from '../../styles/layouts/economy/costIndicator/CostIndicatorView'
 
-export default function CostIndicator({graphData, userName}: any) {
+export default function CostIndicator({graphData, userName, clients}: any) {
+  const [unity, setUnity] = useState('');
+
   const months = [
     'Jan',
     'Fev',
@@ -34,10 +41,28 @@ export default function CostIndicator({graphData, userName}: any) {
       <Header name={userName}>
         <PageTitle title='Indicador de Custo' subtitle='Indicador de Custo - Valores em R$/MWh'/>
       </Header>
+      <FormControl sx={{ m: 1, minWidth: 120, width: 200 }} size="small">
+        <InputLabel id="demo-select-small">Unidade</InputLabel>
+        <Select
+          labelId="demo-select-small"
+          id="demo-select-small"
+          value={unity}
+          label="Unidade"
+          onChange={value => setUnity(value.target.value)}
+          fullWidth
+        >
+          <MenuItem value="">Todas</MenuItem>
+          {/* <MenuItem value="RSZFNAENTR101P">RSZFNAENTR101P</MenuItem> COMENTARIO DE OPÇAO COM DADOS TESTES */}
+          {
+            clients.map((value) => {
+              return <MenuItem key={1} value={value.codigo_scde}>{value.cod_smart_unidade}</MenuItem>
+            })
+          }
+        </Select>
+      </FormControl>
       <section>
         <CostIndicatorChart title='' subtitle=''
           data1={graphData.filter((value, index) => value.mes.slice(4, 8).includes('2021'))}
-          // data1={graphData}
           data2={graphData.filter((value, index) => value.mes.slice(4, 8).includes('2022'))}
           label={months}
         />
@@ -50,9 +75,25 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
   const apiClient = getAPIClient(ctx)
   const { ['@smartAuth-token']: token } = parseCookies(ctx)
   const { ['user-name']: userName } = parseCookies(ctx)
+  const { ['user-client_id']: id } = parseCookies(ctx)
 
   let graphData = [];
 
+  let clients = [];
+
+  await apiClient.post('/units', {
+		"filters": [
+      {"type" : "not_in", "field": "dados_cadastrais.codigo_scde", "value":["0P"]},
+			{"type" : "=", "field": "dados_cadastrais.cod_smart_cliente", "value": id}
+		],
+		"fields": ["cod_smart_unidade", "codigo_scde"],
+		"distinct": true
+  }).then(res => {
+    clients = res.data.data
+  }).catch(res => {
+    // console.log(res)
+  })
+
   await apiClient.post('/economy/MWh').then(res => {
     graphData = res.data.data
   }).catch(res => {
@@ -70,6 +111,7 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
 
   return {
     props: {
+      clients,
       graphData,
       userName
     }

src/pages/dashboard/index.tsx

@@ -54,7 +54,7 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
 
       <Link href='pld'>
         <section className="cardsSection" >
-          <MapCard title='R$/MWh' subtitle='' date='período' statistic='' imgSource='/moneyIcon.svg' />
+          <MapCard title='R$/MWh' subtitle='' date={`período - ${new Date().toLocaleDateString()}`} statistic='' imgSource='/moneyIcon.svg' />
           {
             mapsInfo.map(value => {
               return <MapCard key={value.submarket} title='S' subtitle={value.submarket} statistic={parseFloat(value.value).toFixed(2)} imgSource='/SUL.svg' />
@@ -84,7 +84,7 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
         </GraphCard>
 
         <GraphCard title='Cativo x Livre Mensal' subtitle='Comparativo de Custo Estimado - Valores em R$ x mil' singleBar>
-          <CativoXLivreChart data1={acumulatedGraph} data2={acumulatedGraph} data3={acumulatedGraph}
+          <CativoXLivreChart chartData={acumulatedGraph}
             dataset1="Economia (R$)" dataset2='Est. Cativo' dataset3='Est. Livre'
             label={ConsumoEstimado.label} title='' subtitle='' barLabel hashurado miniature/>
         </GraphCard>

src/pages/estimatedCost/index.tsx

@@ -1,17 +1,24 @@
 import { GetServerSideProps } from 'next'
 import Head from 'next/head'
 import { parseCookies } from 'nookies'
-import React from 'react'
+import React, { useState } from 'react'
 import { CativoXLivreChart } from '../../components/graph/cativoXLivreChart'
 
-import { LineBarChart2 } from '../../components/graph/LineBarChart2'
+// material ui imports
+import MenuItem from '@mui/material/MenuItem';
+import InputLabel from '@mui/material/InputLabel';
+import FormControl from '@mui/material/FormControl';
+import Select from '@mui/material/Select';
+
 import Header from '../../components/header/Header'
 import PageTitle from '../../components/pageTitle/PageTitle'
 import { ConsumoEstimado } from '../../services/consumoEstimado'
 import getAPIClient from '../../services/ssrApi'
 import { EstimatedCostView } from '../../styles/layouts/economy/estimatedCost/EstimatedCostView'
 
-export default function EstimatedCost({graphData, userName}: any) {
+export default function EstimatedCost({graphData, userName, clients}: any) {
+  const [unity, setUnity] = useState('');
+
   return (
     <EstimatedCostView>
       <Head>
@@ -20,8 +27,27 @@ export default function EstimatedCost({graphData, userName}: any) {
       <Header name={userName}>
         <PageTitle title='Cativo x Livre Mensal' subtitle='Comparativo de Custo Estimado - Valores em R$ x mil' />
       </Header>
+      <FormControl sx={{ m: 1, minWidth: 120, width: 200 }} size="small">
+        <InputLabel id="demo-select-small">Unidade</InputLabel>
+        <Select
+          labelId="demo-select-small"
+          id="demo-select-small"
+          value={unity}
+          label="Unidade"
+          onChange={value => setUnity(value.target.value)}
+          fullWidth
+        >
+          <MenuItem value="">Todas</MenuItem>
+          {/* <MenuItem value="RSZFNAENTR101P">RSZFNAENTR101P</MenuItem> !!OPÇAO COM DADOS TESTES!! */}
+          {
+            clients.map((value) => {
+              return <MenuItem key={1} value={value.codigo_scde}>{value.cod_smart_unidade}</MenuItem>
+            })
+          }
+        </Select>
+      </FormControl>
       <section>
-        <CativoXLivreChart data1={graphData} data2={graphData} data3={graphData}
+        <CativoXLivreChart chartData={graphData}
         dataset1="Economia (R$)" dataset2='Est. Cativo' dataset3='Est. Livre'
         label={ConsumoEstimado.label} title='' subtitle='' barLabel hashurado />
       </section>
@@ -33,8 +59,23 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
   const apiClient = getAPIClient(ctx)
   const { ['@smartAuth-token']: token } = parseCookies(ctx)
   const { ['user-name']: userName } = parseCookies(ctx)
+  const { ['user-client_id']: id } = parseCookies(ctx)
 
   let graphData = [];
+  let clients = [];
+
+  await apiClient.post('/units', {
+		"filters": [
+      {"type" : "not_in", "field": "dados_cadastrais.codigo_scde", "value":["0P"]},
+			{"type" : "=", "field": "dados_cadastrais.cod_smart_cliente", "value": id}
+		],
+		"fields": ["cod_smart_unidade", "codigo_scde"],
+		"distinct": true
+  }).then(res => {
+    clients = res.data.data
+  }).catch(res => {
+    // console.log(res)
+  })
 
   await apiClient.post('/economy/estimates').then(res => {
     graphData = res.data.data
@@ -53,6 +94,7 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
 
   return {
     props: {
+      clients,
       graphData,
       userName
     }

src/pages/faq/index.tsx

@@ -18,7 +18,6 @@ export default function commonQuestions({faqData, userName}) {
         <title>Smart Energia - FAQ</title>
       </Head>
       <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' >

src/pages/industryInfo/index.tsx

@@ -59,7 +59,6 @@ export default function industryInfo({userName}: any) {
         <title>Smart Energia - Info de Setor</title>
       </Head>
       <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>

src/pages/notifications/index.tsx

@@ -17,7 +17,6 @@ export default function Notifications({notificationData, userName}: any) {
         <title>Smart Energia - Notificações</title>
       </Head>
       <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' >

src/pages/pld/index.tsx

@@ -1,3 +1,4 @@
+import Fab from '@mui/material/Fab';
 import FormControl from '@mui/material/FormControl';
 import InputLabel from '@mui/material/InputLabel';
 import MenuItem from '@mui/material/MenuItem';
@@ -16,9 +17,19 @@ import PageTitle from '../../components/pageTitle/PageTitle';
 import { api } from '../../services/api';
 import { EvolucaoPld } from '../../services/evolucaoPld';
 import getAPIClient from '../../services/ssrApi';
-import { GoBack, PldGraphView, PldTableView } from '../../styles/layouts/pld/PldView'
+import { GoBack, PldGraphView, PldTableView, TableHeader } from '../../styles/layouts/pld/PldView'
 import RenderIf from '../../utils/renderIf'
 
+import Tabs from '@mui/material/Tabs';
+import Tab from '@mui/material/Tab';
+
+import NavigationIcon from '@mui/icons-material/Navigation';
+
+import TextField from '@mui/material/TextField';
+import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+
 interface pldInterface {
   tableData: any,
   graphByHourData: any,
@@ -30,11 +41,14 @@ interface pldInterface {
 export default function pld({tableData, userName, clientMonth}: pldInterface) {
   const dateFormated = new Date()
 
-  const year_Month = `0${dateFormated.getMonth()}/${dateFormated.getFullYear()}`
+  const year_Month = `0${dateFormated.getMonth()+1}/${dateFormated.getFullYear()}`
 
-  const [date, setDate] = useState(`${dateFormated.getFullYear()}-${dateFormated.getMonth()}-${dateFormated.getUTCDate()}`);
+  const [date, setDate] = useState<any>(new Date());
   const [select, setSelect] = useState('SUDESTE');
-  const [page, setPage] = useState<string>('table')
+
+  // rendering page
+  const [page, setPage] = useState<number>(0)
+
   const [month, setMonth] = useState<string>((dateFormated.getUTCMonth()+1).toString())
 
   const [dataByDay, setDataByDay] = useState([])
@@ -43,6 +57,12 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
   const [norte, setNorte] = useState([])
   const [sudeste, setSudeste] = useState([])
   const [nordeste, setNordeste] = useState([])
+  const [ pageYPosition, setPageYPosition ] = useState(0);
+
+  function getPageYAfterScroll(){
+    setPageYPosition(window.scrollY);
+    console.log(window.scrollY)
+  }
 
   const handleChange = (event: SelectChangeEvent) => {
     setSelect(event.target.value);
@@ -51,6 +71,12 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
     setMonth(event.target.value);
   };
 
+  const handleChangeDate = (newValue: Date | null) => {
+    setDate(newValue)
+
+    console.log(newValue.toLocaleDateString().replace('/', '-').split('-').reverse().join('-'))
+  };
+
   function getDataByDay() {
     api.post('/pld/daily', {
       "limit": 20,
@@ -169,22 +195,43 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
     downloadCSVFile(data.join("\n"), filename);
   }
 
+  // const handleTabChange = (event: React.SyntheticEvent, newValue: number) => {
+  //   setPages(newValue);
+  // };
+
   useEffect(() => {
     getDataByHour()
     getDataByDay()
     console.log(month)
   }, [date, month, select])
 
+  useEffect(() => {
+    window?.addEventListener('scroll', getPageYAfterScroll);
+  }, [])
+
   return (
     <main style={{width: '100%',}}>
       <Head>
         <title>Smart Energia - PLD</title>
       </Head>
-      <RenderIf isTrue={page==='table'? true : false}>
+      <div id='title'/>
-        <Header name={userName}>
+      <Header name={userName}>
-          <Link href='/dashboard' >{'< Voltar para Visão Geral'}</Link>
+        <PageTitle title='PLD Histórico' subtitle='Tabela de consumo PLD'/>
-          <PageTitle title='PLD Histórico' subtitle='Tabela de consumo PLD'/>
+      </Header>
-        </Header>
+      <TableHeader>
+        <Tabs value={page} onChange={(e, nv) => setPage(nv)} aria-label="">
+          <Tab label="Pld Histórico"/>
+          <Tab label="Valores Diários"/>
+          <Tab label="Valores Horários"/>
+        </Tabs>
+        <div className='btnDownload'>
+          <BasicButton onClick={() => {
+            const html = document.querySelector("table").outerHTML;
+            htmlToCSV(html, "tabela_PLD.csv");
+          }} title='Download'/>
+        </div>
+      </TableHeader>
+      <RenderIf isTrue={page===0}>
         <PldTableView>
           <table className="tg">
             <thead>
@@ -202,20 +249,20 @@ 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`}>{parseFloat(data.nordeste).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
+                      <td className={`tg-uulg`}>{parseFloat(data.nordeste).toLocaleString('pt-br',{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`}>{parseFloat(data.norte).toLocaleString('pt-br',{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-gceh`}>{parseFloat(data.sudeste).toLocaleString('pt-br',{currency: 'BRL', minimumFractionDigits: 2})}</td>
-                      <td className={`tg-uulg`}>{parseFloat(data.sul).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
+                      <td className={`tg-uulg`}>{parseFloat(data.sul).toLocaleString('pt-br',{currency: 'BRL', minimumFractionDigits: 2})}</td>
                     </tr>
                   </>
                 })
               }
               <tr>
-                <td></td>
+                <td style={{borderColor: 'transparent'}}></td>
-                <td ></td>
+                <td style={{borderColor: 'transparent'}}></td>
-                <td ></td>
+                <td style={{borderColor: 'transparent'}}></td>
-                <td ></td>
+                <td style={{borderColor: 'transparent'}}></td>
-                <td ></td>
+                <td style={{borderColor: 'transparent'}}></td>
               </tr>
               {
                 tableData.result.map((data, index) => {
@@ -254,28 +301,25 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
               }
             </tbody>
           </table>
-          <div className='btnDownload'>
-          <BasicButton onClick={() => {
-            const html = document.querySelector("table").outerHTML;
-            htmlToCSV(html, "tabela_PLD.csv");
-          }} title='Download'/>
-          </div>
           <section>
-            <article onClick={() => setPage('perMouth')}>
+            <article onClick={() => setPage(1)} className="btn btn-1">
+            <svg height='100px'>
+              <rect x="0" y="0" fill="none" width="100%" height="100%"/>
+            </svg>
               <p>Valores Diários</p>
             </article>
-            <article onClick={() => setPage('perDate')}>
+            <article onClick={() => setPage(2)} className="btn btn-1">
+              <svg height='100px'>
+                <rect x="0" y="0" fill="none" width="100%" height="100%"/>
+              </svg>
               <p>Valores Horários</p>
             </article>
           </section>
         </PldTableView>
       </RenderIf>
 
-      <RenderIf isTrue={page==='perMouth'? true : false}>
+      {/* grafico de grafico por seleção de data (mês)*/}
-        <Header name={userName}>
+      <RenderIf isTrue={page===1}>
-          <GoBack onClick={() => setPage('table')}>{'< Voltar para PLD Histórico'}</GoBack>
-          <PageTitle title='Resumo PLD - Valores Diários' subtitle='Evolução PLD - Valores em R$/MWh'/>
-        </Header>
         <PldGraphView>
           <section className='toolsbar'>
             <div className='select'>
@@ -319,7 +363,7 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
 
                       return 0
                     }).map((data, index) => {
-                      return <MenuItem key={index} value={data.mes_ref.slice(2, 4)}>{data.mes_ref.slice(2, 4)}</MenuItem>
+                      return <MenuItem key={index} value={data.mes_ref.slice(2, 4)}>{data.mes_ref}</MenuItem>
                     })
                   }
                 </Select>
@@ -333,22 +377,36 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
         </PldGraphView>
       </RenderIf>
 
-      <RenderIf isTrue={page==='perDate'? true : false}>
+      {/* grafico de grafico por seleção de data INTEIRA*/}
-        <Header name={userName}>
+      <RenderIf isTrue={page===2}>
-          <GoBack onClick={() => setPage('table')}>{'< Voltar para PLD Histórico'}</GoBack>
-          <PageTitle title='Resumo PLD - Valores Horários' subtitle='Evolução PLD - Valores em R$/MWh'/>
-        </Header>
         <PldGraphView>
           <section className='toolsbar2'>
-            <p>Selecione o mês: </p>
+            <p>Selecione a data: </p>
-            <input type="date" data-date={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)}/> */}
+            <LocalizationProvider dateAdapter={AdapterDateFns} localeText={'pt-BR'} adapterLocale='pt-BR'>
+              <div className='select datePicker'>
+                <DesktopDatePicker
+                  label="Data"
+                  inputFormat="dd/MM/yyyy"
+                  value={date}
+                  onChange={handleChangeDate}
+                  renderInput={(params) => <TextField {...params}/>}
+                />
+              </div>
+            </LocalizationProvider>
           </section>
           <LineChart data1={nordeste} data2={norte} data3={sudeste} data4={sul}
-          dataset1='NORDESTE' dataset2='NORTE' dataset3='SUDESTE' dataset4='SUL'
+            dataset1='NORDESTE' dataset2='NORTE' dataset3='SUDESTE' dataset4='SUL'
-          title={date? `Período - ${date.toString().split("-")[2]}/${date.toString().split("-")[1]}/${date.toString().split("-")[0]}` : null}
+            title={date? `Período - ${date.toLocaleDateString()}` : null}
-          subtitle='' label={['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24']} />
+            subtitle='' label={['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24']}
+          />
         </PldGraphView>
       </RenderIf>
+      {pageYPosition > 300 && <a href="#title" style={{position: 'fixed', right: '50px', bottom: '100px'}}>
+        <Fab sx={{backgroundColor: "#254F7F"}} aria-label="add">
+          <NavigationIcon />
+        </Fab>
+      </a>}
     </main>
   )
 }

src/pages/resumoOperacao/index.tsx

@@ -18,7 +18,7 @@ import { api } from '../../services/api';
 // import { dados } from '../services/DadosTabelaResumoOperacao';
 import data from '../../services/dados.json'
 import getAPIClient from '../../services/ssrApi';
-import { Pagination, TableView } from '../../styles/layouts/ResumoOperacao/ResumoOperacaoView';
+import { Pagination, TableHeader, TableView } from '../../styles/layouts/ResumoOperacao/ResumoOperacaoView';
 
 export default function ResumoOperacao({tableData, clientsData, userName, clientMonth}: any) {
   const csvData = tableData;
@@ -60,6 +60,7 @@ export default function ResumoOperacao({tableData, clientsData, userName, client
   }
 
   useEffect(() => {
+    console.log(month)
     if (unidade!=='' || month!==''){
       api.post('/operation/summary', month && !unidade? {
         "filters": [
@@ -95,44 +96,54 @@ export default function ResumoOperacao({tableData, clientsData, userName, client
       <Header name={userName}>
         <PageTitle title='Resumo de Operações' subtitle='Operações de compra e venda - Mensal' />
       </Header>
-      <h3>Filtrar por Unidade e/ou Mês</h3>
+      <TableHeader>
-      <div className='select'>
+        <article>
-        <FormControl fullWidth>
+          <h3>Filtrar por Unidade e/ou Mês</h3>
-          <InputLabel id="demo-simple-select-labels">Unidades</InputLabel>
+          <div className='select'>
-          <Select
+            <FormControl fullWidth>
-            labelId="demo-simple-select-label"
+              <InputLabel id="demo-simple-select-labels">Unidades</InputLabel>
-            id="demo-simple-select"
+              <Select
-            value={unidade}
+                labelId="demo-simple-select-label"
-            label="Unidade"
+                id="demo-simple-select"
-            onChange={handleChangeUnidade}
+                value={unidade}
-          >
+                label="Unidade"
-            <MenuItem key={1} value={''}>Todas</MenuItem>
+                onChange={handleChangeUnidade}
-            {
+              >
-              clientsData.map((value) => {
+                <MenuItem key={1} value={''}>Todas</MenuItem>
-                return <MenuItem key={1} value={value.cod_smart_unidade}>{value.cod_smart_unidade}</MenuItem>
+                {
-              })
+                  clientsData.map((value) => {
-            }
+                    return <MenuItem key={1} value={value.cod_smart_unidade}>{value.cod_smart_unidade}</MenuItem>
-          </Select>
+                  })
-        </FormControl>
+                }
+              </Select>
+            </FormControl>
 
-        <FormControl fullWidth sx={{ml: 2}}>
+            <FormControl fullWidth sx={{ml: 2}}>
-          <InputLabel id="demo-simple-select-label">Mês</InputLabel>
+              <InputLabel id="demo-simple-select-label">Mês</InputLabel>
-          <Select
+              <Select
-            labelId="demo-simple-select-label"
+                labelId="demo-simple-select-label"
-            id="demo-simple-select"
+                id="demo-simple-select"
-            value={month}
+                value={month}
-            label="Month"
+                label="Month"
-            onChange={handleChangeMonth}
+                onChange={handleChangeMonth}
-          >
+              >
-            <MenuItem value={''}>Todos</MenuItem>
+                <MenuItem value={''}>Todos</MenuItem>
-            {
+                {
-              clientMonth.map((value) => {
+                  clientMonth.map((value) => {
-                return <MenuItem key={1} value={value.mes}>{value.mes}</MenuItem>
+                    return <MenuItem key={1} value={value.mes}>{value.mes}</MenuItem>
-              })
+                  })
-            }
+                }
-          </Select>
+              </Select>
-        </FormControl>
+            </FormControl>
-      </div>
+          </div>
+        </article>
+        <article>
+          <BasicButton title='Baixar CSV' onClick={() => {
+            const html = document.querySelector("table").outerHTML;
+            htmlToCSV(html, "resumo_operacao.csv");
+          }}/>
+        </article>
+      </TableHeader>
       <table className="tg">
         <thead>
           <tr>
@@ -149,8 +160,7 @@ export default function ResumoOperacao({tableData, clientsData, userName, client
           {
             tableDataState.map((value, index) => {
               if (value.mes.slice(4,7) != '2020')
-              return <>
+              return <tr>
-                <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-gceh'>{value.operacao}</td>
@@ -159,16 +169,12 @@ export default function ResumoOperacao({tableData, clientsData, userName, client
                   <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-gceh'>{parseFloat(value.nf_c_icms).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
                 </tr>
-              </>
             })
           }
         </tbody>
       </table>
       <div className='btn'>
-        <BasicButton title='Baixar CSV' onClick={() => {
+
-          const html = document.querySelector("table").outerHTML;
-          htmlToCSV(html, "resumo_operacao.csv");
-        }}/>
       </div>
     </TableView>
   )

src/pages/telemetria/index.tsx

@@ -23,6 +23,13 @@ import getAPIClient from '../../services/ssrApi';
 import router from 'next/router';
 import { DemRegXDemConChart } from '../../components/graph/DemRegXDemConChart';
 
+import TextField from '@mui/material/TextField';
+import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import Stack from '@mui/material/Stack';
+import BasicButton from '../../components/buttons/basicButton/BasicButton';
+
 const style = {
   position: 'absolute' as const,
   top: '50%',
@@ -44,8 +51,8 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
 
 export default function Telemetria({userName, clients}: any) {
   const [unity, setUnity] = useState('');
-  const [startDate, setStartDate] = useState('');
+  const [startDate, setStartDate] = useState(new Date());
-  const [endDate, setEndDate] = useState('');
+  const [endDate, setEndDate] = useState(new Date());
   const [discretization, setDiscretization] = useState('');
 
   const [openSnackSuccess, setOpenSnackSuccess] = useState<boolean>(false)
@@ -110,8 +117,19 @@ export default function Telemetria({userName, clients}: any) {
 
   const [demRegXDemCon, setDemRegXDemCon] = useState(null);
 
+  const [value, setValue] = React.useState<Date | null>(
+    new Date(),
+  );
+
+  const handleChangeStartDate = (newValue: Date | null) => {
+    setStartDate(newValue)
+  };
+  const handleChangeEndDate = (newValue: Date | null) => {
+    setEndDate(newValue)
+  };
+
   async function getTableData() {
-    if (startDate!=='' && endDate!=='' && send)
+    if (startDate.toLocaleDateString()!=='' && endDate.toLocaleDateString()!=='' && send)
       setOpen(true)
       await api.post('/telemetry/powerFactor', {
         "type": discretization,
@@ -137,12 +155,12 @@ export default function Telemetria({userName, clients}: any) {
   }
 
   function handleVerifyFields() {
-    if (unity != '' && startDate != '' && endDate != '' && discretization != '') {
+    if (unity != '' && startDate.toLocaleDateString() != '' && endDate.toLocaleDateString() != '' && discretization != '') {
       router.push({
         pathname: '/chartTelemetry',
         query: {
-          startDate,
+          'startDate': startDate.toLocaleDateString(),
-          endDate,
+          'endDate': endDate.toLocaleDateString(),
           discretization,
           unity
         },
@@ -256,17 +274,40 @@ export default function Telemetria({userName, clients}: any) {
           </FormControl>
         </div>
 
-        <div className='select'>
+        {/* <div className='select'>
           <p className='title' >Data inicial</p>
           <input type="date" data-date="" data-date-format="DD MMMM YYYY" value={startDate}
           onChange={(value) => setStartDate(value.target.value)} min="2021-01-01"/>
-        </div>
+        </div> */}
 
-        <div className='select'>
+        <LocalizationProvider dateAdapter={AdapterDateFns}>
+          <div className='select datePicker'>
+            <p className='title' >Data inicial</p>
+            <DesktopDatePicker
+              label="Date desktop"
+              inputFormat="dd/MM/yyyy"
+              value={startDate}
+              onChange={handleChangeStartDate}
+              renderInput={(params) => <TextField {...params}/>}
+            />
+          </div>
+          <div className='select datePicker'>
+            <p className='title' >Data final</p>
+            <DesktopDatePicker
+              label="Date desktop"
+              inputFormat="dd/MM/yyyy"
+              value={endDate}
+              onChange={handleChangeEndDate}
+              renderInput={(params) => <TextField {...params} sx={{ml: 1}}/>}
+            />
+          </div>
+        </LocalizationProvider>
+
+        {/* <div className='select'>
           <p className='title' >Data final</p>
           <input type="date" data-date="" data-date-format="DD MMMM YYYY" value={endDate}
           onChange={(value) => setEndDate(value.target.value)} min="2021-01-01"/>
-        </div>
+        </div> */}
 
         <div className='select'>
           <p className='title' >Discretização</p>
@@ -291,13 +332,13 @@ export default function Telemetria({userName, clients}: any) {
             </Select>
           </FormControl>
         </div>
-      <button className='sendButton' onClick={() => {
+        <BasicButton title='Selecionar!' onClick={() => {
-        setSend(true)
+          setSend(true)
-        getTableData()
+          getTableData()
-      }}>Selecionar!</button>
+        }}/>
       </section>
 
-      <RenderIf isTrue={startDate!=='' && endDate!=='' && tableData===null && exception === false && send}>
+      <RenderIf isTrue={startDate.toLocaleDateString()!=='' && endDate.toLocaleDateString()!=='' && tableData===null && exception === false && send}>
         <div className='modal'>
           <div id="preloader_1">
             <span></span>
@@ -308,7 +349,7 @@ export default function Telemetria({userName, clients}: any) {
           </div>
         </div>
       </RenderIf>
-      <RenderIf isTrue={startDate!=='' && endDate!=='' && tableData!==null}>
+      <RenderIf isTrue={startDate.toLocaleDateString()!=='' && endDate.toLocaleDateString()!=='' && tableData!==null}>
         <table className="tg">
           <thead>
             <tr>

src/services/charts/telemetry/getDemand.ts

@@ -0,0 +1,17 @@
+import { api } from "../../api"
+
+export async function getDemand(
+    unity: string,
+    startDate: string,
+    endDate: string,
+    discretization: string
+  ) {
+  const { data } = await api.post('/telemetry/demand', {
+		"filters": [
+			{"type" : "=", "field": `${discretization}.ponto`, "value": unity},
+			{"type" : "between", "field": ["dia_num"], "value": [startDate, endDate]}
+		]
+  })
+
+  return data.data
+}

src/services/charts/telemetry/getDiscretization.ts

@@ -0,0 +1,18 @@
+import { api } from "../../api"
+
+export async function getDiscretization(
+    unity: string,
+    startDate: string,
+    endDate: string,
+    discretization: string
+  ) {
+  const { data } = await api.post('/telemetry/discretization', {
+    "type": discretization,
+    "filters": [
+        {"type" : "=", "field": "med_5min.ponto", "value": unity}
+      ]
+    }
+  )
+
+  return data.data
+}

src/services/charts/telemetry/getPowerFactor.ts

@@ -0,0 +1,17 @@
+import { api } from "../../api"
+
+export async function getPowerFactorData(
+    unity: string,
+    startDate: string,
+    endDate: string,
+    discretization: string
+  ) {
+  const { data } = await api.post('/telemetry/powerFactor', {
+    "filters": [
+      {"type" : "=", "field": `${discretization}.ponto`, "value": unity},
+      {"type" : "between", "field": "dia_num", "value": [startDate, endDate]}
+    ]
+  })
+
+  return data.data
+}

src/styles/globals.ts

@@ -39,4 +39,55 @@ export const GlobalStyle = createGlobalStyle`
   * {
     box-sizing: border-box;
   }
+
+
+  .datePicker {
+      .css-1u3bzj6-MuiFormControl-root-MuiTextField-root,
+      .css-o9k5xi-MuiInputBase-root-MuiOutlinedInput-root,
+      .css-o9k5xi-MuiInputBase-root-MuiOutlinedInput-root,
+      .css-o9k5xi-MuiInputBase-root-MuiOutlinedInput-root,
+      .MuiOutlinedInput-notchedOutline,
+      .css-1d3z3hw-MuiOutlinedInput-notchedOutline,
+      .MuiOutlinedInput-input,
+      .MuiInputBase-input,
+      .MuiInputBase-inputAdornedEnd,
+      .css-nxo287-MuiInputBase-input-MuiOutlinedInput-input{
+        /* background-color: red!important; */
+        /* border: none!important;
+        outline: 0 */
+        height: 45px;
+      }
+
+      .MuiFormControl-root,
+      .MuiTextField-root,
+      .css-1u3bzj6-MuiFormControl-root-MuiTextField-root {
+        margin-top: 8px;
+      }
+
+      .MuiOutlinedInput-input,
+      .MuiInputBase-input,
+      .MuiInputBase-inputAdornedEnd,
+      .css-nxo287-MuiInputBase-input-MuiOutlinedInput-input {
+        border: none;
+        outline: 0;
+        background-color: transparent;
+      }
+
+      .MuiOutlinedInput-input,
+      .MuiInputBase-input .MuiInputBase-inputAdornedEnd,
+      .css-nxo287-MuiInputBase-input-MuiOutlinedInput-input {
+        padding-top: 6px;
+      }
+
+      .MuiButtonBase-root,
+      .MuiIconButton-root,
+      .MuiIconButton-edgeEnd,
+      .MuiIconButton-sizeMedium,
+      .css-1yq5fb3-MuiButtonBase-root-MuiIconButton-root {
+        margin-bottom: 5px;
+        width: 30px;
+        height: 30px;
+      }
+    }
+
 `;

src/styles/layouts/ResumoOperacao/ResumoOperacaoView.ts

@@ -20,15 +20,6 @@ export const TableView = styled.div`
     margin-top: 10px;
   }
 
-  .select{
-    display: flex;
-    flex-direction: row;
-
-    margin-bottom: 25px;
-
-    width: 30rem;
-  }
-
   .tg{
     border-collapse:collapse;
     border-spacing:0;
@@ -81,7 +72,7 @@ export const TableView = styled.div`
     color:#6a707e;
     font-size:14px;
     text-align:center;
-    vertical-align:top
+    vertical-align:top;
   }
   .tg .tg-0tzy{
     color:#abafb3;
@@ -120,8 +111,39 @@ export const TableView = styled.div`
   .teste {
     width: 10rem;
   }
+
+  table, th:last-child{
+    border: transparent;
+    border-top-right-radius: 20px;
+  }
+
+  table, th:first-child {
+    border: transparent;
+    border-top-left-radius: 20px;
+  }
+
+  .radius {
+    background-color: red!important;
+  }
 `;
 
+export const TableHeader = styled.section`
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+
+  width: 100%;
+
+  margin-bottom: 25px;
+
+  .select{
+    display: flex;
+    flex-direction: row;
+
+    width: 30rem;
+  }
+`
+
 export const Pagination = styled.div`
   display: flex;
   justify-content: space-between;

src/styles/layouts/Telemetria/TelemetriaView.ts

@@ -215,8 +215,8 @@ export const TelemetriaView = styled.main`
 
     .select {
       display: flex;
-      justify-content: center;
       align-items: flex-start;
+      justify-content: center;
 
       flex-direction: column;
     }

src/styles/layouts/aboutUs/AboutUsView.ts

@@ -12,8 +12,7 @@ export const AboutUsView = styled.main`
 
     aside {
       position: relative;
-      /* margin-bottom: 150px; */
+      bottom: 220px;
-
       display: flex;
       justify-content: center;
       align-items: center;

src/styles/layouts/pld/PldView.ts

@@ -3,10 +3,16 @@ import styled from "styled-components"
 export const PldTableView = styled.main`
   width: 100%;
 
+  border-radius: 8px!important;
+
   table {
     p {
       font-size: 12px;
     }
+
+    thead {
+      border-radius: 8px!important;
+    }
   }
 
   .actual {
@@ -134,6 +140,8 @@ export const PldTableView = styled.main`
     align-items: center;
 
     article {
+      position: relative;
+
       display: flex;
       justify-content: center;
       align-items: center;
@@ -143,13 +151,53 @@ export const PldTableView = styled.main`
 
       margin: 40px;
 
-      border-radius: 20px;
+      background: #255488;
+      color: white;
+
+      border-radius: 8px;
       box-shadow: 0 0 11px rgba(0, 0, 0, 0.2)  ;
       -webkit-box-shadow: 0 0 11px rgba(0, 0, 0, 0.2)  ;
       -moz-box-shadow: 0 0 11px rgba(0, 0, 0, 0.2)  ;
-      background: #F8F8F8;
 
       cursor: pointer;
+
+      background: darken($red, 1.5%);
+
+      background: linear-gradient(200.69deg, #254f7f 9%, #3183e0 98%), #FFFFFF;
+
+      :hover {
+        transition: all 0.2s linear;
+        transform: scale(1.1);
+      }
+
+      svg {
+        height: 100%;
+        left: 0;
+        position: absolute;
+        top: 0;
+        width: 100%;
+      }
+
+      rect {
+        fill: none;
+        stroke: #fff;
+        stroke-width: 2;
+        stroke-dasharray: 422, 0;
+        transition: all 0.35s linear;
+      }
+    }
+
+    .btn-1:hover {
+      background: rgba($red, 0);
+      letter-spacing: 1px;
+
+
+      rect {
+        stroke-width: 5;
+        stroke-dasharray: 15, 310;
+        stroke-dashoffset: 48;
+        transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
+      }
     }
   }
 
@@ -161,7 +209,13 @@ export const PldTableView = styled.main`
   }
 
   .btnDownload{
-    margin-top: 25px;
+    width: fit-content;
+    margin-bottom: 15px;
+    :hover {
+      position: relative;
+      transition: all 0.2s linear;
+      transform: translateY(-6px);
+    }
   }
 `
 
@@ -277,3 +331,15 @@ export const NewTableLine = styled.section`
     margin: 0 0 10px 0;
   }
 `
+
+export const TableHeader = styled.label`
+  width: 100%;
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  flex-direction: row;
+
+  padding: 0 40px 0 40px
+`