and more fixes

package.json

@@ -36,6 +36,7 @@
     "axios": "^0.27.2",
     "chart.js": "^3.7.1",
     "chartjs-plugin-datalabels": "^2.0.0",
+    "chartjs-plugin-style": "^0.5.0",
     "date-fns": "^2.28.0",
     "eslint-plugin-react": "^7.29.4",
     "eslit": "^6.0.0",

src/components/buttons/gradientButton/GradientButton.tsx

@@ -21,9 +21,6 @@ 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

@@ -37,33 +37,9 @@ export const GradientButtonView = styled.button`
     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);
-    }
   }
 
   * {
@@ -72,21 +48,11 @@ export const GradientButtonView = styled.button`
   }
 
   p {
-    :first-child {
+    font-family: 'Poppins';
-      font-family: 'Poppins';
+    font-style: normal;
-      font-style: normal;
+    font-weight: 700;
-      font-weight: 700;
+    font-size: 11px;
-      font-size: calc(20px);
 
-      text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    text-transform: uppercase;
-    }
-    :last-child {
-      font-family: 'Poppins';
-      font-style: normal;
-      font-weight: 700;
-      font-size: 11px;
-
-      text-transform: uppercase;
-    }
   }
 `

src/components/graph/cativoXLivreChart/index.tsx

@@ -107,7 +107,7 @@ export function CativoXLivreChart({ title, subtitle, chartData, label, red, data
           dataArr.map(data => {
               sum += data;
           });
-          const result = `${(parseFloat(value)).toLocaleString('pt-br')}`
+          const result = `${(parseInt(value)).toLocaleString('pt-br')}`
 
           return value==null? null : result
         }
@@ -136,7 +136,7 @@ export function CativoXLivreChart({ title, subtitle, chartData, label, red, data
         },
         borderWidth: 2,
         fill: false,
-        data: chartData.map(value => value.economia_mensal),
+        data: chartData.map(value => parseInt(value.economia_mensal)),
       },
       {
         type: 'bar' as const,
@@ -146,7 +146,7 @@ export function CativoXLivreChart({ title, subtitle, chartData, label, red, data
         },
         data: chartData.map(value => {
           if (!value.dad_estimado)
-          return value.custo_cativo
+          return parseInt(value.custo_cativo)
         }),
       },
       {
@@ -158,7 +158,7 @@ export function CativoXLivreChart({ title, subtitle, chartData, label, red, data
         },
         data: chartData.map(value => {
           if (!value.dad_estimado)
-          return value.custo_livre
+          return parseInt(value.custo_livre)
         }),
       },
       {
@@ -167,7 +167,7 @@ export function CativoXLivreChart({ title, subtitle, chartData, label, red, data
         backgroundColor: pattern.draw('diagonal', '#C2D5FB'),
         data: chartData.map(value => {
           if (value.dad_estimado)
-          return value.custo_cativo
+          return parseInt(value.custo_cativo)
         }),
       },
       {
@@ -176,7 +176,7 @@ export function CativoXLivreChart({ title, subtitle, chartData, label, red, data
         backgroundColor: pattern.draw('diagonal', '#255488'),
         data: chartData.map(value => {
           if (value.dad_estimado)
-          return value.custo_livre
+          return parseInt(value.custo_livre)
         }),
       }
     ],

src/components/graph/grossAnualChart/GrossAnualChart.tsx

@@ -92,7 +92,7 @@ export function GrossAnulChart({ title, subtitle, dataProps, label, dataset, bar
         position: 'bottom' as const,
         labels: {
           font: {
-            size: 16,
+            size: 12,
           }
         }
       },
@@ -144,7 +144,7 @@ export function GrossAnulChart({ title, subtitle, dataProps, label, dataset, bar
   return (
     <GrossAnualChartView>
       <ChartTitle title={title} subtitle={subtitle} />
-      <Chart options={options} data={data} type='bar'/>
+      <Chart options={options} data={data} type='bar' height={150}/>
     </GrossAnualChartView>
   )
 }

src/components/graph/grossMensalChart/GrossMensalChart.tsx

@@ -132,7 +132,7 @@ export default function GrossMensalChart({ title, data1, data2, label, subtitle,
       <ChartTitle title={title} subtitle={subtitle} />
       <ChartJs
         options={options}
-        data={data} type={'bar'} />
+        data={data} type={'bar'} height={'156'}/>
     </GrossMensalChartView>
   )
 }

src/components/graph/grossMensalChart/GrossMensalChartView.ts

@@ -1,14 +1,11 @@
 import styled from "styled-components"
 
 export const GrossMensalChartView = styled.div`
-  width: 100%;
+  width: 90%;
 
-  div{
+  transform: translateY(-25px);
-    /* margin-top: 10px; */
-  }
 
   @media (max-width: 900px) {
     min-width: 20rem
   }
-
 `

src/components/sidebar/Sidebar.tsx

@@ -2,13 +2,17 @@ import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Modal from '@mui/material/Modal';
 import Typography from '@mui/material/Typography';
-import { GetServerSideProps } from 'next';
+
 import Image from 'next/image'
 import Link from 'next/link'
+
 import { useRouter } from 'next/router'
 import { parseCookies } from 'nookies';
 import React, { useContext, useEffect, useState } from 'react'
+
 import { AuthContext } from '../../contexts/AuthContext';
+import { MenuContext } from '../../contexts/menu/MenuContext';
+
 import { api } from '../../services/api';
 
 import RenderIf from '../../utils/renderIf';
@@ -30,6 +34,8 @@ const style = {
 };
 
 export default function Sidebar() {
+  const {pldMenu, setPldMenu, economyMenu, setEconomyMenu} = useContext(MenuContext)
+
   const [open, setOpen] = useState(false);
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
@@ -37,6 +43,8 @@ export default function Sidebar() {
   const { signOut } = useContext(AuthContext)
 
   const [ economiaDrawer, setEconomiaDrawer ] = useState(false)
+  const [ pldDrawer, setPldDrawer ] = useState(false)
+
   const [ notificationsCount, setNotificationsCount ] = useState<number>(0)
 
   const [ viewModal, setViewModal ] = useState(false)
@@ -97,7 +105,7 @@ export default function Sidebar() {
       </RenderIf>
 
       <RenderIf isTrue={role === '2'}>
-        <SidebarView economiaDrawer={economiaDrawer} modalOpen={viewModal} >
+        <SidebarView economiaDrawer={economiaDrawer} pldDrawer={pldDrawer} modalOpen={viewModal} >
           <div className='hamburger' onClick={() => setViewModal(!viewModal)} >
             <Image src='/assets/hamburgerModal.svg' width={55} height={55} />
           </div>
@@ -106,17 +114,22 @@ export default function Sidebar() {
           </div>
           <ul>
             <Link href='/dashboard'><li className={router.pathname=='/dashboard'? 'actualPath' : null} ><Image src='/assets/sidebar/dashboardIcon.svg' width={25} height={25} />{'Visão Geral'}</li></Link>
-            <li onClick={() => setEconomiaDrawer(!economiaDrawer)} className={router.pathname=='/grossSavings' || router.pathname=='/accumulatedSavings' || router.pathname=='/estimatedCost' || router.pathname=='/costIndicator' ? 'actualPath' : null } ><Image src='/assets/sidebar/economyIcon.svg' width={25} height={25} />{'Economia >'}</li>
+            <Link href='/economy'><li onClick={() => setEconomiaDrawer(!economiaDrawer)} className={router.pathname=='/grossSavings' || router.pathname=='/accumulatedSavings' || router.pathname=='/estimatedCost' || router.pathname=='/costIndicator' ? 'actualPath' : null } ><Image src='/assets/sidebar/economyIcon.svg' width={25} height={25} />{'Economia'}</li></Link>
-              <div className='economiaDrawer drawer' >
+              {/* <div className='economiaDrawer drawer'>
-                <Link href='/grossSavings'><li className={router.pathname=='/grossSavings'? 'actualPathDrawer' : null}>Economia Bruta Anual</li></Link>
+                <Link href='/economy'><li onClick={() => setEconomyMenu(0)} className={economyMenu===0? 'actualPathDrawer' : null}>Economia Bruta Anual</li></Link>
-                <Link href='/accumulatedSavings'><li className={router.pathname=='/accumulatedSavings'? 'actualPathDrawer' : null}>Economia Bruta Mensal</li></Link>
+                <Link href='/economy'><li onClick={() => setEconomyMenu(1)} className={economyMenu===1? 'actualPathDrawer' : null}>Economia Bruta Mensal</li></Link>
-                <Link href='/estimatedCost'><li className={router.pathname=='/estimatedCost'? 'actualPathDrawer' : null}>Cativo x Livre Mensal</li></Link>
+                <Link href='/economy'><li onClick={() => setEconomyMenu(2)} className={economyMenu===2? 'actualPathDrawer' : null}>Cativo x Livre Mensal</li></Link>
-                <Link href='/costIndicator'><li className={router.pathname=='/costIndicator'? 'actualPathDrawer' : null}>Custo R$/MWh</li></Link>
+                <Link href='/economy'><li onClick={() => setEconomyMenu(3)} className={economyMenu===3? 'actualPathDrawer' : null}>Custo R$/MWh</li></Link>
-              </div>
+              </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='/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='/pld'><li className={router.pathname=='/pld'? 'actualPath' : null}><Image src='/assets/sidebar/newsIcon.svg' width={25} height={25} />{'PLD'}</li></Link>
+            <li onClick={() => setPldDrawer(!pldDrawer)} className={router.pathname=='/pld'? 'actualPath' : null}><Image src='/assets/sidebar/newsIcon.svg' width={25} height={25} />{'PLD >'}</li>
+              <div className='pldDrawer drawer'>
+                <Link href='/pld'><li onClick={() => setPldMenu(0)} className={pldMenu==0? 'actualPathDrawer' : null}>PLD Histórico</li></Link>
+                <Link href='/pld'><li onClick={() => setPldMenu(1)} className={pldMenu===1? 'actualPathDrawer' : null}>Valores Diários</li></Link>
+                <Link href='/pld'><li onClick={() => setPldMenu(2)} className={pldMenu===2? 'actualPathDrawer' : null}>Valores Horários</li></Link>
+              </div>
             <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>
@@ -124,15 +137,15 @@ export default function Sidebar() {
             <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}
+              open={open}
-            onClose={handleClose}
+              onClose={handleClose}
-            aria-labelledby="modal-modal-title"
+              aria-labelledby="modal-modal-title"
-            aria-describedby="modal-modal-description"
+              aria-describedby="modal-modal-description"
             >
               <Box sx={style}>
                 <ModalContainer>
                   <Image src='/assets/marca1.png' width={250} height={200}/>
-                  <Typography id="modal-modal-title" variant="h6" component="h2">
+                  <Typography id="modal-modal-title" variant="subtitle2" component="p" style={{color: 'gray'}}>
                     Deseja realmente sair ?
                   </Typography>
                   <article>
@@ -141,7 +154,7 @@ export default function Sidebar() {
                   </article>
                 </ModalContainer>
               </Box>
-          </Modal>
+            </Modal>
           </ul>
           <aside>
             <p>Nossos Gerentes estão prontos para atendê-los</p>

src/components/sidebar/SidebarView.ts

@@ -2,7 +2,8 @@ import styled from 'styled-components'
 
 interface SidebarViewInterface {
   economiaDrawer: boolean | null,
-  modalOpen: boolean | null
+  modalOpen: boolean | null,
+  pldDrawer: boolean | undefined
 }
 
 export const SidebarView = styled.nav<SidebarViewInterface>`
@@ -92,6 +93,9 @@ export const SidebarView = styled.nav<SidebarViewInterface>`
     .economiaDrawer {
       display: ${props => props.economiaDrawer? 'block' : 'none'};
     }
+    .pldDrawer {
+      display: ${props => props.pldDrawer? 'block' : 'none'};
+    }
   }
 
   aside {
@@ -254,7 +258,7 @@ export const ModalContainer = styled.div`
     margin-top: 4em;
     button {
       width: 10em;
-      height: 4em;
+      height: 3em;
 
       cursor: pointer;
 

src/contexts/menu/MenuContext.tsx

@@ -0,0 +1,22 @@
+import React, { createContext, useState } from "react";
+
+type AuthContextType = {
+  pldMenu: number,
+  setPldMenu: any,
+
+  economyMenu: number,
+  setEconomyMenu: any
+}
+
+export const MenuContext = createContext({} as AuthContextType)
+
+export function MenuProvider({children}: {children: React.ReactNode}) {
+  const [pldMenu, setPldMenu] = useState<number>(0)
+  const [economyMenu, setEconomyMenu] = useState<number>(0)
+
+  return (
+    <MenuContext.Provider value={{pldMenu, setPldMenu, economyMenu, setEconomyMenu}}>
+      {children}
+    </MenuContext.Provider>
+  )
+}

src/pages/_app.tsx

@@ -19,6 +19,7 @@ import '../styles/nprogress/nprogress.css'
 import { GetServerSideProps } from 'next'
 import { parseCookies } from 'nookies'
 import getAPIClient from '../services/ssrApi'
+import { MenuProvider } from '../contexts/menu/MenuContext'
 
 export function MyApp({ Component, pageProps, notificationsCount }: AppProps | any) {
   const router = useRouter()
@@ -45,25 +46,27 @@ export function MyApp({ Component, pageProps, notificationsCount }: AppProps | a
 
   return (
     <AuthProvider>
-      <AppView>
+      <MenuProvider>
-        <Head>
+        <AppView>
-          <link rel="icon" type="imagem/png" href="/assets/logose.png" />
+          <Head>
-          <meta name="viewport" content="viewport-fit=cover" />
+            <link rel="icon" type="imagem/png" href="/assets/logose.png" />
-        </Head>
+            <meta name="viewport" content="viewport-fit=cover" />
-        <Home />
+          </Head>
-        <VerifyEmail />
+          <Home />
-        <ForgotPassword />
+          <VerifyEmail />
-        <GlobalStyle />
+          <ForgotPassword />
-        {
+          <GlobalStyle />
-          rota != '/' && rota != '/forgotPassword' && rota != '/verifyEmail'?
+          {
-            <>
+            rota != '/' && rota != '/forgotPassword' && rota != '/verifyEmail'?
-              <Sidebar />
+              <>
-              <Component {...pageProps} />
+                <Sidebar />
-            </>
+                <Component {...pageProps} />
-            :
+              </>
-            null
+              :
-        }
+              null
-      </AppView>
+          }
+        </AppView>
+      </MenuProvider>
     </AuthProvider>
   )
 }

src/pages/aboutUs/index.tsx

@@ -12,7 +12,7 @@ export default function aboutUs({userName, text}) {
   return (
     <AboutUsView>
       <Head>
-        <title>Smart Energia - About Us</title>
+        <title>Smart Energia - Sobre nós</title>
       </Head>
 
       <Header name={userName}/>

src/pages/chartTelemetry/index.tsx

@@ -20,10 +20,10 @@ import { getDemand } from '../../services/charts/telemetry/getDemand'
 import { getDiscretization } from '../../services/charts/telemetry/getDiscretization'
 
 export default function chartTelemetry({userName}) {
-  const [fatorPotenciaData, setFatorPotenciaData] = useState(null);
+  const [fatorPotenciaData, setFatorPotenciaData] = useState([]);
-  const [demRegXDemCon, setDemRegXDemCon] = useState(null);
+  const [demRegXDemCon, setDemRegXDemCon] = useState([]);
-  const [discretizedConsumptionData, setDiscretizedConsumptionData] = useState(null);
+  const [discretizedConsumptionData, setDiscretizedConsumptionData] = useState([]);
-  const [discretizedConsumptionDataReativa, setDiscretizedConsumptionDataReativa] = useState(null);
+  const [discretizedConsumptionDataReativa, setDiscretizedConsumptionDataReativa] = useState([]);
 
   const { ['user-cod_client']: cod_client } = parseCookies()
 
@@ -35,21 +35,21 @@ export default function chartTelemetry({userName}) {
 
   function getChartsData() {
     console.log(token)
-    // getPowerFactorData("PRAXCUENTR101P", "2022-01-01", "2022-01-31", "med_5min")
+    getPowerFactorData("PRAXCUENTR101P", "2022-01-01", "2022-01-31", "med_5min")
-    //   .then(result => setFatorPotenciaData(result))
+      .then(result => setFatorPotenciaData(result))
-    //   .catch(exception => console.log('exeption', exception))
+      .catch(exception => console.log('exeption', exception))
 
-    getDiscretization("PRAXCUENTR101P", "2022-01-01", "2022-01-31", "med_5min")
+    // getDiscretization("PRAXCUENTR101P", "2022-01-01", "2022-01-31", "med_5min")
-      .then(result => setDiscretizedConsumptionDataReativa(result))
+    //   .then(result => setDiscretizedConsumptionDataReativa(result))
-      .catch(exception => console.log(exception))
+    //   .catch(exception => console.log(exception))
 
-    getDiscretization("PRAXCUENTR101P", "2022-01-01", "2022-01-31", "med_5min")
+    // getDiscretization("PRAXCUENTR101P", "2022-01-01", "2022-01-31", "med_5min")
-      .then(result => setDiscretizedConsumptionData(result))
+    //   .then(result => setDiscretizedConsumptionData(result))
-      .catch(exception => console.log(exception))
+    //   .catch(exception => console.log(exception))
 
-    getDemand("PRAXCUENTR101P", "2022-01-01", "2022-01-31", "med_5min")
+    // getDemand("PRAXCUENTR101P", "2022-01-01", "2022-01-31", "med_5min")
-      .then(result => setDemRegXDemCon(result))
+    //   .then(result => setDemRegXDemCon(result))
-      .catch(exception => console.log(exception))
+    //   .catch(exception => console.log(exception))
 
     // setFatorPotenciaData(res.data.data)
     // setDiscretizedConsumptionDataReativa(res.data.data)
@@ -70,7 +70,7 @@ export default function chartTelemetry({userName}) {
       <PageTitle title='Telemetria - Graficos' subtitle='Gráficos' />
       <section className='chartContainer'>
         {
-          demRegXDemCon==null?
+          demRegXDemCon===null?
           <div id="preloader_1">
             <span></span>
             <span></span>
@@ -82,12 +82,13 @@ export default function chartTelemetry({userName}) {
           <>
 
           <RenderIf isTrue={discretization!=='1_dia' && discretization!=='1_mes'}>
+          {/* <RenderIf isTrue={true}> */}
             <div>
               <DiscretizedConsumptionChart 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='' dataProps={discretizedConsumptionData} label={discretizedConsumptionData.map(value => value.minut)} dataset={'Consumo'} dataset1='Estimado' month/>
-                <p style={{alignSelf: 'center', textAlign: 'center'}}>{`Mês - ${startDate.toString().split('-')[2]}/${startDate.toString().split('-')[1]}/${startDate.toString().split('-')[0]}`}</p>
+                <p style={{alignSelf: 'center', textAlign: 'center'}}>{`Mês - ${startDate}`}</p>
             </div>
 
             <div>
@@ -100,7 +101,9 @@ export default function chartTelemetry({userName}) {
           </RenderIf>
 
             <div>
-              <DemRegXDemConChart data1={demRegXDemCon} data2={demRegXDemCon} dataset1={'Demanda contratada + 5%'} dataset2={'barra1'} dataset3={'Demanda Registrada'} label={demRegXDemCon.map(value => value.hora)} title='Demanda Contratada X Registrada' subtitle='' red/>
+              <DemRegXDemConChart data1={demRegXDemCon} data2={demRegXDemCon}
+              dataset1={'Demanda contratada + 5%'} dataset2={'barra1'} dataset3={'Demanda Registrada'}
+              label={demRegXDemCon.map(value => value.hora)} title='Demanda Contratada X Registrada' subtitle='' red/>
             </div>
 
             <div>

src/pages/costIndicator/index.tsx

@@ -1,7 +1,7 @@
 import { GetServerSideProps } from 'next'
 import Head from 'next/head'
 import { parseCookies } from 'nookies'
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 
 // material ui imports
 import MenuItem from '@mui/material/MenuItem';
@@ -14,6 +14,7 @@ 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'
+import { api } from '../../services/api';
 
 export default function CostIndicator({graphData, userName, clients}: any) {
   const [unity, setUnity] = useState('');
@@ -33,6 +34,21 @@ export default function CostIndicator({graphData, userName, clients}: any) {
     'Dez'
   ]
 
+  const [graphDataState, setGraphDataState] = useState([]);
+
+  useEffect(() => {
+    api.post('/economy/estimates', unity!==''?{
+      "filters": [
+        {"type" : "=", "field":"dados_cadastrais.cod_smart_unidade", "value": unity}
+      ]
+    }:{}).then(res => {
+      setGraphDataState(res.data.data)
+      console.log()
+    }).catch(res => {
+      // console.log(res)
+    })
+  }, [unity])
+
   return (
     <CostIndicatorView>
       <Head>
@@ -55,15 +71,19 @@ export default function CostIndicator({graphData, userName, clients}: any) {
           {/* <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>
+              return <MenuItem key={1} value={value.cod_smart_unidade}>{value.unidade}</MenuItem>
             })
           }
         </Select>
       </FormControl>
       <section>
         <CostIndicatorChart title='' subtitle=''
-          data1={graphData.filter((value, index) => value.mes.slice(4, 8).includes('2021'))}
+          data1={unity!==''? graphDataState.filter((value, index) => value.mes.slice(4, 8).includes('2021'))
-          data2={graphData.filter((value, index) => value.mes.slice(4, 8).includes('2022'))}
+            :
+          graphData.filter((value, index) => value.mes.slice(4, 8).includes('2021'))}
+          data2={unity!==''? graphDataState.filter((value, index) => value.mes.slice(4, 8).includes('2022'))
+            :
+          graphData.filter((value, index) => value.mes.slice(4, 8).includes('2022'))}
           label={months}
         />
       </section>
@@ -83,12 +103,16 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
 
   await apiClient.post('/units', {
 		"filters": [
-      {"type" : "not_in", "field": "dados_cadastrais.codigo_scde", "value":["0P"]},
+			{"type" : "=", "field": "dados_cadastrais.cod_smart_cliente", "value": 180201211},
-			{"type" : "=", "field": "dados_cadastrais.cod_smart_cliente", "value": id}
+			{"type" : "not_in", "field": "dados_cadastrais.codigo_scde", "value":["0P"]}
 		],
-		"fields": ["cod_smart_unidade", "codigo_scde"],
+		"fields": [
+			"unidade",
+			"cod_smart_unidade",
+			"codigo_scde"],
 		"distinct": true
-  }).then(res => {
+}).then(res => {
+    console.log(res.data.data)
     clients = res.data.data
   }).catch(res => {
     // console.log(res)

src/pages/dashboard/index.tsx

@@ -26,6 +26,7 @@ import Chart2 from '../../components/graph/Chart2'
 import { GrossAnulChart } from '../../components/graph/grossAnualChart/GrossAnualChart'
 import CostIndicatorChart from '../../components/graph/costIndicatorChart'
 import { CativoXLivreChart } from '../../components/graph/cativoXLivreChart'
+import GrossMensalChart from '../../components/graph/grossMensalChart/GrossMensalChart'
 
 export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensalGraph, grossMensalYears, acumulatedGraph, mapsInfo, userName, costIndicator} : any) {
   const months = [
@@ -46,7 +47,7 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
   return (
     <DashboardView>
       <Head>
-        <title>Smart Energia - Dashboard</title>
+        <title>Smart Energia - Visão Geral</title>
       </Head>
       <Header name={userName}>
         <PageTitle title='Visão Geral' subtitle='Bem Vindo a Smart Energia' />
@@ -77,10 +78,12 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
         </GraphCard>
 
         <GraphCard title='Economia Bruta Mensal' subtitle='Economia Bruta Estimada e Acumulada Mensal - Valores em R$ x mil' singleBar>
-          <Chart2 title='' subtitle=''
+        <GrossMensalChart title='' subtitle=''
-          data1={grossMensalGraph.filter((value, index) => value.mes.slice(3, 8).includes('2021'))}
+          data1={grossMensalGraph}
-          data2={grossMensalGraph.filter((value, index) => value.mes.slice(3, 8).includes('2022'))}
+          data2={grossMensalGraph}
-          label={months} miniature/>
+          label={grossMensalGraph.map((value) => value.mes)}
+          miniature
+        />
         </GraphCard>
 
         <GraphCard title='Cativo x Livre Mensal' subtitle='Comparativo de Custo Estimado - Valores em R$ x mil' singleBar>

src/pages/economy/index.tsx

@@ -0,0 +1,270 @@
+import Fab from '@mui/material/Fab';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+import { GetServerSideProps } from 'next';
+import Head from 'next/head';
+import Link from 'next/link';
+import { parseCookies } from 'nookies';
+import React, { useContext, useEffect, useState } from 'react'
+
+import BasicButton from '../../components/buttons/basicButton/BasicButton';
+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 { EvolucaoPld } from '../../services/evolucaoPld';
+import getAPIClient from '../../services/ssrApi';
+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';
+import { MenuContext } from '../../contexts/menu/MenuContext';
+import { GrossAnulChart } from '../../components/graph/grossAnualChart/GrossAnualChart';
+import GrossMensalChart from '../../components/graph/grossMensalChart/GrossMensalChart';
+import { CativoXLivreChart } from '../../components/graph/cativoXLivreChart';
+import { ConsumoEstimado } from '../../services/consumoEstimado';
+import CostIndicatorChart from '../../components/graph/costIndicatorChart';
+
+export default function economy({userName, anual, years, brutaMensal, yearsBrutaMensal, catLiv, clients, indicatorCost}: any) {
+  const {economyMenu, setEconomyMenu} = useContext(MenuContext)
+
+  const [unity, setUnity] = useState<string>('');
+
+  const [catLivDataState, setCatLivDataState] = useState(null);
+  const [indicatorDataState, setIndicatorDataState] = useState(null);
+
+  const months = [
+    'Jan',
+    'Fev',
+    'Mar',
+    'Abr',
+    'Mai',
+    'Jun',
+    'Jul',
+    'Ago',
+    'Set',
+    'Out',
+    'Nov',
+    'Dez'
+  ]
+
+  useEffect(() => {
+    api.post('/economy/estimates', unity!==''?{
+      "filters": [
+        {"type" : "=", "field":"dados_cadastrais.cod_smart_unidade", "value": unity}
+      ]
+    }:{}).then(res => {
+      setCatLivDataState(res.data.data)
+      console.log()
+    }).catch(res => {
+      // console.log(res)
+    })
+  }, [unity])
+
+  useEffect(() => {
+    api.post('/economy/estimates', unity!==''?{
+      "filters": [
+        {"type" : "=", "field":"dados_cadastrais.cod_smart_unidade", "value": unity}
+      ]
+    }:{}).then(res => {
+      setIndicatorDataState(res.data.data)
+      console.log()
+    }).catch(res => {
+      // console.log(res)
+    })
+  }, [unity])
+
+  return (
+    <main style={{width: '100%'}}>
+      <Head>
+        <title>Smart Energia - PLD</title>
+      </Head>
+      <div id='title'/>
+      <Header name={userName}>
+        <PageTitle title='Economia' subtitle='Graficos de economia'/>
+      </Header>
+
+      <TableHeader>
+        <Tabs value={economyMenu} onChange={(e, nv) => setEconomyMenu(nv)} aria-label="">
+          <Tab label="Bruta Anual"/>
+          <Tab label="Bruta Mensal"/>
+          <Tab label="Cativo x Livre Mensal"/>
+          <Tab label="Custo R$/MWh"/>
+        </Tabs>
+      </TableHeader>
+
+      <RenderIf isTrue={economyMenu===0}>
+        <section>
+          <GrossAnulChart title='' subtitle=''
+            dataset='Consolidada'
+
+            dataProps={anual}
+            label={years} barLabel bruta
+          />
+        </section>
+      </RenderIf>
+
+      <RenderIf isTrue={economyMenu===1}>
+        <GrossMensalChart title='' subtitle=''
+          data1={brutaMensal}
+          data2={brutaMensal}
+          label={yearsBrutaMensal}
+        />
+      </RenderIf>
+
+      <RenderIf isTrue={economyMenu===2}>
+        <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.cod_smart_unidade}>{value.unidade}</MenuItem>
+              })
+            }
+          </Select>
+        </FormControl>
+        <section>
+          <CativoXLivreChart chartData={unity!==''? catLivDataState : catLiv}
+          dataset1="Economia (R$)" dataset2='Est. Cativo' dataset3='Est. Livre'
+          label={ConsumoEstimado.label} title='' subtitle='' barLabel hashurado/>
+        </section>
+      </RenderIf>
+
+      <RenderIf isTrue={economyMenu===3}>
+      <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.cod_smart_unidade}>{value.unidade}</MenuItem>
+            })
+          }
+        </Select>
+      </FormControl>
+      <section>
+        <CostIndicatorChart title='' subtitle=''
+          data1={unity!=''? indicatorDataState?.filter((value, index) => value.mes.slice(4, 8).includes('2021'))
+            :
+          indicatorCost?.filter((value, index) => value.mes.slice(4, 8).includes('2021'))}
+          data2={unity!=''? indicatorDataState?.filter((value, index) => value.mes.slice(4, 8).includes('2022'))
+            :
+          indicatorCost?.filter((value, index) => value.mes.slice(4, 8).includes('2022'))}
+          label={months}
+        />
+      </section>
+      </RenderIf>
+    </main>
+  )
+}
+
+export const getServerSideProps: GetServerSideProps = async (ctx) => {
+  const apiClient = getAPIClient(ctx)
+  const { ['@smartAuth-token']: token } = parseCookies(ctx)
+  const { ['user-name']: userName } = parseCookies(ctx)
+
+  let anual = [];
+
+  await apiClient.post('/economy/grossAnnual').then(res => {
+    anual = res.data.data
+  }).catch(res => {
+    // console.log(res)
+  })
+
+  const years = anual.map((value) => value.ano)
+
+  let brutaMensal = [];
+
+  await apiClient.post('/economy/grossMonthly').then(res => {
+    brutaMensal = res.data.data
+    // console.log(graphData[0].mes)
+  }).catch(res => {
+    // console.log(res)
+  })
+
+  const yearsBrutaMensal = brutaMensal.map((value) => value.mes)
+
+  let catLiv = [];
+  let clients = [];
+
+  await apiClient.post('/units', {
+		"filters": [
+			{"type" : "=", "field": "dados_cadastrais.cod_smart_cliente", "value": 180201211},
+			{"type" : "not_in", "field": "dados_cadastrais.codigo_scde", "value":["0P"]}
+		],
+		"fields": [
+			"unidade",
+			"cod_smart_unidade",
+			"codigo_scde"],
+		"distinct": true
+}).then(res => {
+    console.log(res.data.data)
+    clients = res.data.data
+  }).catch(res => {
+    // console.log(res)
+  })
+
+  await apiClient.post('/economy/estimates').then(res => {
+    catLiv = res.data.data
+  }).catch(res => {
+    // console.log(res)
+  })
+
+  let indicatorCost = []
+
+  await apiClient.post('/economy/MWh').then(res => {
+    indicatorCost = res.data.data
+  }).catch(res => {
+    // console.log(res)
+  })
+
+  if (!token) {
+    return {
+      redirect: {
+        destination: '/',
+        permanent: false
+      }
+    }
+  }
+
+  return {
+    props: {
+      userName,
+      anual,
+      years,
+      brutaMensal,
+      yearsBrutaMensal,
+      catLiv,
+      clients,
+      indicatorCost
+    }
+  }
+}

src/pages/estimatedCost/index.tsx

@@ -1,7 +1,7 @@
 import { GetServerSideProps } from 'next'
 import Head from 'next/head'
 import { parseCookies } from 'nookies'
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { CativoXLivreChart } from '../../components/graph/cativoXLivreChart'
 
 // material ui imports
@@ -16,8 +16,25 @@ import { ConsumoEstimado } from '../../services/consumoEstimado'
 import getAPIClient from '../../services/ssrApi'
 import { EstimatedCostView } from '../../styles/layouts/economy/estimatedCost/EstimatedCostView'
 
+import { api } from '../../services/api'
+
 export default function EstimatedCost({graphData, userName, clients}: any) {
-  const [unity, setUnity] = useState('');
+  const [unity, setUnity] = useState<string>(null);
+
+  const [graphDataState, setGraphDataState] = useState(null);
+
+  useEffect(() => {
+    api.post('/economy/estimates', unity!==''?{
+      "filters": [
+        {"type" : "=", "field":"dados_cadastrais.cod_smart_unidade", "value": unity}
+      ]
+    }:{}).then(res => {
+      setGraphDataState(res.data.data)
+      console.log()
+    }).catch(res => {
+      // console.log(res)
+    })
+  }, [unity])
 
   return (
     <EstimatedCostView>
@@ -41,13 +58,13 @@ export default function EstimatedCost({graphData, userName, clients}: any) {
           {/* <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>
+              return <MenuItem key={1} value={value.cod_smart_unidade}>{value.unidade}</MenuItem>
             })
           }
         </Select>
       </FormControl>
       <section>
-        <CativoXLivreChart chartData={graphData}
+        <CativoXLivreChart chartData={unity!==null? graphDataState : graphData}
         dataset1="Economia (R$)" dataset2='Est. Cativo' dataset3='Est. Livre'
         label={ConsumoEstimado.label} title='' subtitle='' barLabel hashurado/>
       </section>
@@ -66,12 +83,15 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
 
   await apiClient.post('/units', {
 		"filters": [
-      {"type" : "not_in", "field": "dados_cadastrais.codigo_scde", "value":["0P"]},
+			{"type" : "=", "field": "dados_cadastrais.cod_smart_cliente", "value": 180201211},
-			{"type" : "=", "field": "dados_cadastrais.cod_smart_cliente", "value": id}
+			{"type" : "not_in", "field": "dados_cadastrais.codigo_scde", "value":["0P"]}
 		],
-		"fields": ["cod_smart_unidade", "codigo_scde"],
+		"fields": [
+			"unidade",
+			"cod_smart_unidade",
+			"codigo_scde"],
 		"distinct": true
-  }).then(res => {
+}).then(res => {
     console.log(res.data.data)
     clients = res.data.data
   }).catch(res => {

src/pages/pld/index.tsx

@@ -7,7 +7,7 @@ import { GetServerSideProps } from 'next';
 import Head from 'next/head';
 import Link from 'next/link';
 import { parseCookies } from 'nookies';
-import React, { useEffect, useState } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 
 import BasicButton from '../../components/buttons/basicButton/BasicButton';
 import { LineBarChart } from '../../components/graph/LineBarChart';
@@ -29,6 +29,7 @@ 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 { MenuContext } from '../../contexts/menu/MenuContext';
 
 interface pldInterface {
   tableData: any,
@@ -39,6 +40,8 @@ interface pldInterface {
 }
 
 export default function pld({tableData, userName, clientMonth}: pldInterface) {
+  const {pldMenu, setPldMenu} = useContext(MenuContext)
+
   const dateFormated = new Date()
 
   const year_Month = `0${dateFormated.getMonth()+1}/${dateFormated.getFullYear()}`
@@ -47,8 +50,6 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
   const [select, setSelect] = useState('SUDESTE');
 
   // rendering page
-  const [page, setPage] = useState<number>(0)
-
   const [month, setMonth] = useState<any>(new Date().toLocaleDateString().slice(3, 10))
 
   const [dataByDay, setDataByDay] = useState([])
@@ -218,13 +219,13 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
         <PageTitle title='PLD' subtitle='Evolução PLD - Valores em R$/MWh'/>
       </Header>
       <TableHeader>
-        <Tabs value={page} onChange={(e, nv) => setPage(nv)} aria-label="">
+        <Tabs value={pldMenu} onChange={(e, nv) => setPldMenu(nv)} aria-label="">
           <Tab label="Pld Histórico"/>
           <Tab label="Valores Diários"/>
           <Tab label="Valores Horários"/>
         </Tabs>
         <div className='btnDownload'>
-          <RenderIf isTrue={page === 0}>
+          <RenderIf isTrue={pldMenu === 0}>
             <BasicButton onClick={() => {
               const html = document.querySelector("table").outerHTML;
               htmlToCSV(html, "tabela_PLD.csv");
@@ -233,7 +234,7 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
         </div>
       </TableHeader>
 
-      <RenderIf isTrue={page===0}>
+      <RenderIf isTrue={pldMenu===0}>
         <PldTableView>
           <table className="tg">
             <thead>
@@ -259,19 +260,32 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
                   </>
                 })
               }
-              <tr>
+            </tbody>
-                <td style={{borderColor: 'transparent', borderBottomColor: '#DDDFE1'}}></td>
+          </table>
-                <td style={{borderColor: 'transparent', borderBottomColor: '#DDDFE1'}}></td>
+          {/* <section>
-                <td style={{borderColor: 'transparent', borderBottomColor: '#DDDFE1'}}></td>
+            <article onClick={() => setPage(1)} className="btn btn-1">
-                <td style={{borderColor: 'transparent', borderBottomColor: '#DDDFE1'}}></td>
+            <svg height='100px'>
-                <td style={{borderColor: 'transparent', borderBottomColor: '#DDDFE1'}}></td>
+              <rect x="0" y="0" fill="none" width="100%" height="100%"/>
-              </tr>
+            </svg>
+              <p>Valores Diários</p>
+            </article>
+            <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>
+        <PldTableView>
+          <table className='tg'>
+            <tbody>
               {
                 tableData.result.map((data, index) => {
                   if (index === 0) {
                     return <>
-                      <tr  style={{borderTopLeftRadius: 8}}>
+                      <tr>
-                        <td className='tg-gceh'>Máximo</td>
+                        <td style={{borderTopLeftRadius: 8}} className='tg-gceh'>Máximo</td>
                         <td className='tg-uulg'>{parseFloat(data.nordeste_max).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
                         <td className='tg-gceh'>{parseFloat(data.norte_max).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
                         <td className='tg-gceh'>{parseFloat(data.sudeste_max).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
@@ -303,25 +317,11 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
               }
             </tbody>
           </table>
-          {/* <section>
-            <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(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>
 
       {/* grafico de grafico por seleção de data (mês)*/}
-      <RenderIf isTrue={page===1}>
+      <RenderIf isTrue={pldMenu===1}>
         <PldGraphView>
           <section className='toolsbar'>
             <div className='select'>
@@ -386,7 +386,7 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
       </RenderIf>
 
       {/* grafico de grafico por seleção de data INTEIRA*/}
-      <RenderIf isTrue={page===2}>
+      <RenderIf isTrue={pldMenu===2}>
         <PldGraphView>
           <section className='toolsbar2'>
             {/* <p>Selecione a data: </p> */}

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, TableHeader, TableView } from '../../styles/layouts/ResumoOperacao/ResumoOperacaoView';
+import { Pagination, TableBodyView, TableHeader, TableView } from '../../styles/layouts/ResumoOperacao/ResumoOperacaoView';
 
 export default function ResumoOperacao({tableData, clients, userName, clientMonth}: any) {
   const csvData = tableData;
@@ -100,13 +100,12 @@ export default function ResumoOperacao({tableData, clients, userName, clientMont
         <article>
           <div className='select'>
             <div>
-              <p>Selecionar unidade:</p>
               <FormControl fullWidth>
                 <InputLabel id="demo-simple-select-labels">Unidades</InputLabel>
                 <Select
                   labelId="demo-simple-select-label"
                   id="demo-simple-select"
-                  value={unidade}
+                  value={clients.length > 1? unidade : clients[0]}
                   label="Unidade"
                   onChange={handleChangeUnidade}
                   fullWidth
@@ -122,7 +121,6 @@ export default function ResumoOperacao({tableData, clients, userName, clientMont
             </div>
 
             <div>
-              <p>Selecionar mês:</p>
               <FormControl fullWidth>
                 <InputLabel id="demo-simple-select-label">Mês</InputLabel>
                 <Select
@@ -135,7 +133,16 @@ export default function ResumoOperacao({tableData, clients, userName, clientMont
                 >
                   <MenuItem value={''}>Todos</MenuItem>
                   {
-                    clientMonth.map((value) => {
+                    clientMonth.sort((a, b) => {
+                      if (parseFloat(a.mes.slice(0, 2)) < parseFloat(b.mes.slice(0, 2)))
+                      if (parseFloat(a.mes.slice(3, 7)) > parseFloat(b.mes.slice(3, 7))) return -1
+                      else return 1
+                      if (parseFloat(a.mes.slice(0, 2)) > parseFloat(b.mes.slice(0, 2)))
+                      if (parseFloat(a.mes.slice(3, 7)) < parseFloat(b.mes.slice(3, 7))) return 1
+                      else return -1
+
+                      return 0
+                    }).map((value) => {
                       return <MenuItem key={value.mes} value={value.mes}>{value.mes}</MenuItem>
                     })
                   }
@@ -151,38 +158,37 @@ export default function ResumoOperacao({tableData, clients, userName, clientMont
           }}/>
         </article>
       </TableHeader>
-      <table className="tg">
+      <TableBodyView>
-        <thead>
+        <table className="tg">
-          <tr>
+          <thead>
-            <th className='tg-8oo6'>Mês </th>
+            <tr>
-            <th className='tg-8oo6'>Unidade </th>
+              <th className='tg-8oo6'>Mês </th>
-            <th className='tg-8oo6'>Operação</th>
+              <th className='tg-8oo6'>Unidade </th>
-            <th className='tg-8oo6'>Montante (MWh)</th>
+              <th className='tg-8oo6'>Operação</th>
-            <th className='tg-8oo6'>Contraparte</th>
+              <th className='tg-8oo6'>Contraparte</th>
-            <th className='tg-8oo6'>Preço(R$/MWh)</th>
+              <th className='tg-8oo6'>Montante (MWh)</th>
-            <th className='tg-8oo6'>ValorNF/Crédito(R$)</th>
+              <th className='tg-8oo6'>Preço(R$/MWh)</th>
-          </tr>
+              <th className='tg-8oo6'>ValorNF/Crédito(R$)</th>
-        </thead>
+            </tr>
-        <tbody>
+          </thead>
-          {
+          <tbody>
-            tableDataState.map((value, index) => {
+            {
-              if (value.mes.slice(4,7) != '2020')
+              tableDataState.map((value, index) => {
-              return <tr>
+                if (value.mes.slice(4,7) != '2020')
-                  <td key={value.mes} className='tg-gceh'>{value.mes}</td>
+                return <tr>
-                  <td key={value.cod_smart_unidade} className='tg-gceh'>{value.cod_smart_unidade}</td>
+                    <td key={value.mes} className='tg-gceh'>{value.mes}</td>
-                  <td key={value.operacao} className='tg-gceh'>{value.operacao}</td>
+                    <td key={value.cod_smart_unidade} className='tg-gceh'>{value.cod_smart_unidade}</td>
-                  <td key={value.montante_nf} className='tg-gceh'>{parseFloat(value.montante_nf).toLocaleString('pt-br')}</td>
+                    <td key={value.operacao} className='tg-gceh'>{value.operacao}</td>
-                  <td key={value.contraparte} className='tg-gceh'>{value.contraparte}</td>
+                    <td key={value.contraparte} className='tg-gceh'>{value.contraparte}</td>
-                  <td key={value.preco_nf} className='tg-gceh'>{parseFloat(value.preco_nf).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
+                    <td key={value.montante_nf} className='tg-gceh'>{parseFloat(value.montante_nf).toLocaleString('pt-br')}</td>
-                  <td key={value.nf_c_icms} className='tg-gceh'>{parseFloat(value.nf_c_icms).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
+                    <td key={value.preco_nf} className='tg-gceh'>{parseFloat(value.preco_nf).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
-                </tr>
+                    <td key={value.nf_c_icms} className='tg-gceh'>{parseFloat(value.nf_c_icms).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
-            })
+                  </tr>
-          }
+              })
-        </tbody>
+            }
-      </table>
+          </tbody>
-      <div className='btn'>
+        </table>
-
+      </TableBodyView>
-      </div>
     </TableView>
   )
 }

src/pages/telemetria/index.tsx

@@ -274,41 +274,6 @@ export default function Telemetria({userName, clients}: any) {
           </FormControl>
         </div>
 
-        {/* <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> */}
-
-        <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 className='select'>
           <p className='title' >Discretização</p>
           <FormControl sx={{ m: 1, minWidth: 120, width: 200 }} size="small">
@@ -332,6 +297,40 @@ export default function Telemetria({userName, clients}: any) {
             </Select>
           </FormControl>
         </div>
+
+        <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}
+              maxDate={discretization === '1_mes'? new Date(startDate).setUTCFullYear(startDate.getUTCFullYear()+2)
+                :
+                discretization === '1_dia'?new Date(startDate).setUTCFullYear(startDate.getUTCFullYear()+2)
+                  :
+                  discretization === '1_hora'?new Date(startDate).setUTCMonth(startDate.getUTCMonth()+1)
+                    :
+                    discretization === '15_min'?new Date(startDate).setUTCDate(startDate.getUTCDate()+7)
+                      :
+                      new Date(startDate).setUTCDate(startDate.getUTCDate()+1)
+                  }
+              onChange={handleChangeEndDate}
+              renderInput={(params) => <TextField {...params} sx={{ml: 1}}/>}
+            />
+          </div>
+        </LocalizationProvider>
+
         <BasicButton title='Selecionar!' onClick={() => {
           setSend(true)
           getTableData()

src/services/charts/telemetry/getPowerFactor.ts

@@ -14,9 +14,9 @@ export async function getPowerFactorData(
 			{"type" : "=", "field": "med_5min.ponto", "value": "PRAXCUENTR101P"},
 			{"type" : "between", "field": "dia_num", "value": ["2022-01-01", "2022-01-31"]}
 		]
-}, {
+  }, {
     headers: {
-      'Authorization': `Bearer 1260|RHfh3uMsEfHwCTqxKOhy1CEIr34UIln9OFdf5Fc8`
+      'Authorization': `Bearer 1292|E4jbc5ZWmgCCBMOVn4PvPx56MUbf4nUg5MNgxjmP`
     }
   })
   return data.data

src/styles/layouts/ResumoOperacao/ResumoOperacaoView.ts

@@ -62,7 +62,7 @@ export const TableView = styled.div`
   }
 
   .tg .tg-gceh{
-    background-color:#efefef;
+    background-color: transparent;
     color:#6a707e;
     font-size:14px;
     text-align:center;
@@ -81,7 +81,11 @@ export const TableView = styled.div`
     width: 10rem;
   }
 
-  table, th:last-child{
+  table, th {
+    vertical-align: middle;
+  }
+
+  table, th:last-child {
     border: transparent;
     border-top-right-radius: 8px;
   }
@@ -90,6 +94,13 @@ export const TableView = styled.div`
     border: transparent;
     border-top-left-radius: 8px;
   }
+
+  table, td {
+    border: transparent;
+    border-top-left-radius: 8px;
+
+    text-overflow: ellipsis;
+  }
 `;
 
 export const TableHeader = styled.section`
@@ -156,3 +167,35 @@ export const NewTableLine = styled.section`
     margin: 0 0 10px 0;
   }
 `
+
+export const TableBodyView = styled.section`
+  border-radius: 8px;
+
+  background-color: #EFEFEF;
+
+  width: 100%;
+
+  border: rgb(221,223,225);
+  border-style:solid;
+  border-width: 1px;
+
+  tr {
+    :last-child {
+      /* background-color: red; */
+
+      border-bottom-color: transparent;
+
+      td {
+        :first-child {
+          border-left-color: transparent;
+          border-bottom-color: transparent;
+          /* background-color: red; */
+        }
+        :last-child {
+          border-right-color: transparent;
+          border-bottom-color: transparent;
+        }
+      }
+    }
+  }
+`

src/styles/layouts/economy/accumulatedSavings/AccumulatedSavingsView.ts

@@ -10,9 +10,5 @@ export const AccumulatedSavingsView = styled.main`
     display: flex;
     justify-content: center;
     align-items: center;
-
-    canvas {
-      width: 80%;
-    }
   }
 `

src/styles/layouts/pld/PldView.ts

@@ -195,6 +195,18 @@ export const PldTableView = styled.div`
       transform: translateY(-6px);
     }
   }
+
+  .space {
+    background-color: #F7F7F7;
+
+    border-color: transparent;
+
+    border-bottom-color: #DDDFE1;
+
+    height: 15px!important;
+
+    padding: 0!important;
+  }
 `
 
 export const PldGraphView = styled.main`

tsconfig.json

@@ -19,7 +19,7 @@
     "isolatedModules": true,
     "jsx": "preserve"
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "additional.d.ts"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "additional.d.ts", "src/contexts/economy/EconomyContext.tss"],
   "exclude": [
     "node_modules"
   ]

yarn.lock

@@ -2009,15 +2009,45 @@ chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.2:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
+"chart.js@>= 2.6.0 < 3":
+  version "2.9.4"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.9.4.tgz#0827f9563faffb2dc5c06562f8eb10337d5b9684"
+  integrity sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==
+  dependencies:
+    chartjs-color "^2.1.0"
+    moment "^2.10.2"
+
 chart.js@^3.7.1:
   version "3.7.1"
   resolved "https://registry.npmjs.org/chart.js/-/chart.js-3.7.1.tgz"
 
+chartjs-color-string@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz#1df096621c0e70720a64f4135ea171d051402f71"
+  integrity sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==
+  dependencies:
+    color-name "^1.0.0"
+
+chartjs-color@^2.1.0:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.4.1.tgz#6118bba202fe1ea79dd7f7c0f9da93467296c3b0"
+  integrity sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==
+  dependencies:
+    chartjs-color-string "^0.6.0"
+    color-convert "^1.9.3"
+
 chartjs-plugin-datalabels@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/chartjs-plugin-datalabels/-/chartjs-plugin-datalabels-2.0.0.tgz#caacefb26803d968785071eab012dde8746c5939"
   integrity sha512-WBsWihphzM0Y8fmQVm89+iy99mmgejmj5/jcsYqwxSioLRL/zqJ4Scv/eXq5ZqvG3TpojlGzZLeaOaSvDm7fwA==
 
+chartjs-plugin-style@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/chartjs-plugin-style/-/chartjs-plugin-style-0.5.0.tgz#ba31deb016cf0d29c73e420bb40778f89cdfabd4"
+  integrity sha512-QWMWRGpkexgMTHZg2l1OVtnSkElGNAM0MchozG/ucU6NW0xXINS/YsIE2tl7nG1nwZA2FH/myVbI4uMguIAXPA==
+  dependencies:
+    chart.js ">= 2.6.0 < 3"
+
 chownr@^1.1.1:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
@@ -2091,7 +2121,7 @@ cmd-shim@^5.0.0:
   dependencies:
     mkdirp-infer-owner "^2.0.0"
 
-color-convert@^1.9.0:
+color-convert@^1.9.0, color-convert@^1.9.3:
   version "1.9.3"
   resolved "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz"
   dependencies:
@@ -3711,6 +3741,11 @@ mkdirp@^1.0.3, mkdirp@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
 
+moment@^2.10.2:
+  version "2.29.4"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"
+  integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
+
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz"