update consumo API

src/components/administrativeTables/NotificationsTable.tsx

@@ -41,15 +41,6 @@ function createData(
   };
 }
 
-const rows = [
-  createData('Confira tal coisa - Texto da notificação', 'Copel', 'enviada'),
-  createData('Confira tal coisa - Texto da notificação', 'Copel', 'enviada'),
-  createData('Confira tal coisa - Texto da notificação', 'Copel', 'enviada'),
-  createData('Confira tal coisa - Texto da notificação', 'Copel', 'falhou'),
-  createData('Confira tal coisa - Texto da notificação', 'Copel', 'pendente'),
-  createData('Confira tal coisa - Texto da notificação', 'Copel', 'enviada'),
-];
-
 function descendingComparator<T>(a: T, b: T, orderBy: keyof T) {
   if (b[orderBy] < a[orderBy]) {
     return -1;

src/components/buttons/faqButton/FaqButtonView1.ts

@@ -4,9 +4,9 @@ export const FaqButtonView1 = styled.button`
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-top: 10px;
+  margin-top: 40px;
   margin-left: 65px;
-  width: 350px;
+  width: 320px;
   height: 45px;
   cursor: pointer;
   background: #DDDDDD;

src/components/buttons/faqButton/FaqButtonView2.ts

@@ -5,8 +5,8 @@ export const FaqButtonView2 = styled.button`
   justify-content: center;
   align-items: center;
   margin-top: -46px;
-  margin-left: 430px;
+  margin-left: 444px;
-  width: 350px;
+  width: 320px;
   height: 45px;
   cursor: pointer;
   background: #254F7F;
@@ -16,7 +16,5 @@ export const FaqButtonView2 = styled.button`
   font-family: 'Poppins';
   font-size: 90%;
 
-
-
   color: #FFFFFF;
 `

src/components/graph/Chart.tsx

@@ -54,7 +54,7 @@ export default function Chart({ title, data1, data2, label, subtitle, dataset1,
         offset: -20,
         align: "start",
         font: {
-          size: 16
+          size: 12
         }
       },
       legend: {
@@ -72,13 +72,13 @@ export default function Chart({ title, data1, data2, label, subtitle, dataset1,
     datasets: [
       {
         label: dataset1? dataset1 : '2021',
-        data: data1.map(value => value.custo_unit),
+        data: data1.map(value => value.custo_unit? value.custo_unit : 0),
         backgroundColor: '#C2D5FB',
       },
       data2?
       {
         label: dataset2? dataset2 : '2022',
-        data: data2.map(value => value.custo_unit),
+        data: data2.map(value => value.custo_unit? value.custo_unit : 0),
         backgroundColor: '#255488',
       } : null
     ],

src/components/graph/LineBarChart.tsx

@@ -71,9 +71,10 @@ interface LineBarChartInterface {
   dataset3?: string,
   barLabel?: boolean | undefined,
   hashurado?: boolean | undefined,
+  reais?: boolean | undefined
 }
 
-export function LineBarChart({ title, subtitle, data1, data2, data3, label, red, dataset1, dataset2, dataset3, barLabel, hashurado }: LineBarChartInterface) {
+export function LineBarChart({ title, subtitle, data1, data2, data3, label, red, dataset1, dataset2, dataset3, barLabel, hashurado, reais }: LineBarChartInterface) {
   const chartRef = useRef<ChartJS>(null);
 
   const currentTime = new Date();
@@ -93,7 +94,7 @@ export function LineBarChart({ title, subtitle, data1, data2, data3, label, red,
         offset: -20,
         align: "start",
         font: {
-          size: 16
+          size: 12
         }
       },
       legend: {
@@ -111,7 +112,7 @@ export function LineBarChart({ title, subtitle, data1, data2, data3, label, red,
     datasets: [
       {
         type: 'line' as const,
-        label: dataset1? dataset1 : 'Dataset 1',
+        label: dataset1&&reais==false? parseFloat(dataset1).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2}) : dataset1,
         borderColor: red?
         '#f00' : '#0c9200',
         datalabels: {

src/components/graph/LineBarChart2.tsx

@@ -93,7 +93,7 @@ export function LineBarChart2({ title, subtitle, data1, data2, data3, label, red
         offset: -20,
         align: "start",
         font: {
-          size: 16
+          size: 12
         }
       },
       legend: {

src/components/graph/LineChart.tsx

@@ -55,7 +55,7 @@ export default function LineChart({ title, subtitle, data1, data2, data3, data4,
         offset: -20,
         align: "start",
         font: {
-          size: 16
+          size: 12
         }
       },
       legend: {

src/components/graph/SingleBar.tsx

@@ -51,7 +51,7 @@ export function SingleBar({ title, subtitle, dataProps, label, dataset, dataset1
               sum += data;
           });
           const percentage = (dataProps[ctx.dataIndex].econ_percentual*100).toFixed(0)+"%";
-          const result = `${value}\n    ${percentage}`
+          const result = `${parseFloat(value).toFixed(0)}\n    ${percentage}`
 
           return value==null? null : result
         },
@@ -61,7 +61,7 @@ export function SingleBar({ title, subtitle, dataProps, label, dataset, dataset1
         offset: -40,
         align: "start",
         font: {
-          size: 16
+          size: 10
         }
       },
       legend: {

src/components/header/Header.tsx

@@ -35,23 +35,22 @@ function stringAvatar(name: string) {
 }
 
 interface headerInterface {
-  name: string
+  name: string,
+  admin?: boolean | undefined
 }
 
-export default function Header({ name }: headerInterface) {
+export default function Header({ name, admin }: headerInterface) {
   return (
     <HeaderView>
       <section>
-        <TextField
-          id="outlined-textarea"
-          label="Encontre na Página"
-          placeholder="Encontre na Página"
-          multiline
-          fullWidth
-        />
       </section>
       <section>
-        <Image src='/assets/png/copel.png' width={170} height={50} />
+        {
+          !admin?
+          <Image src='/assets/png/copel.png' width={170} height={50} />
+          :
+          null
+        }
         <div className='icon' >
           <p>
             olá, {name}

src/components/sidebar/Sidebar.tsx

@@ -7,7 +7,8 @@ import Image from 'next/image'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { parseCookies } from 'nookies';
-import React, { useEffect, useState } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
+import { AuthContext } from '../../contexts/AuthContext';
 
 import RenderIf from '../../utils/renderIf';
 import { SidebarView } from './SidebarView'
@@ -25,10 +26,12 @@ const style = {
 };
 
 export default function Sidebar() {
-  const [open, setOpen] = React.useState(false);
+  const [open, setOpen] = useState(false);
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
 
+  const { signOut } = useContext(AuthContext)
+
   const [ economiaDrawer, setEconomiaDrawer ] = useState(false)
 
   const [ viewModal, setViewModal ] = useState(false)
@@ -37,8 +40,6 @@ export default function Sidebar() {
 
   const { ['user-role']: role } = parseCookies()
 
-  // console.log(role)
-
   useEffect(() => {
     setViewModal(false)
   }, [router.pathname])
@@ -54,10 +55,10 @@ export default function Sidebar() {
             <Image src='/assets/logo.svg' width={100} height={100} />
           </div>
           <ul>
-            <Link href='/administrative/clients'><li className={router.pathname=='/administrative' ? 'actualPath' : null } ><Image src='/assets/sidebar/economyIcon.svg' width={25} height={25} />{'Clientes >'}</li></Link>
+            <Link href='/administrative/clients'><li className={router.pathname=='/administrative/clients' ? 'actualPath' : null } ><Image src='/assets/sidebar/economyIcon.svg' width={25} height={25} />{'Clientes >'}</li></Link>
             <Link href='/administrative/general'><li className={router.pathname=='/administrative/general'? 'actualPath' : null} ><Image src='/assets/sidebar/aboutUs.svg' width={25} height={25} />{'Sobre Nós'}</li></Link>
             <Link href='/administrative/faq'><li className={router.pathname=='/administrative/faq' ? 'actualPath' : null } ><Image src='/assets/sidebar/saqIcon.svg' width={25} height={25} />{'FAQ >'}</li></Link>
-            <Link href='/administrative/notification'><li className={router.pathname=='/administrative/notifications'? 'actualPath' : null}><Image src='/assets/sidebar/notificationsIcon.svg' width={25} height={25} />{'Notificações >'}<div className='notification'><p>25</p></div></li></Link>
+            <Link href='/administrative/notification'><li className={router.pathname=='/administrative/notification'? 'actualPath' : null}><Image src='/assets/sidebar/notificationsIcon.svg' width={25} height={25} />{'Notificações >'}</li></Link>
             <button onClick={handleOpen}><Image src='/assets/logout.svg' width={25} height={25} />{'Sair'}</button>
             <Modal
             open={open}
@@ -92,9 +93,9 @@ export default function Sidebar() {
             <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>
               <div className='economiaDrawer drawer' >
-                <Link href='/grossSavings'><li className={router.pathname=='/grossSavings'? 'actualPathDrawer' : null}>Economia Bruta</li></Link>
+                <Link href='/grossSavings'><li className={router.pathname=='/grossSavings'? 'actualPathDrawer' : null}>Economia Bruta Anual</li></Link>
-                <Link href='/accumulatedSavings'><li className={router.pathname=='/accumulatedSavings'? 'actualPathDrawer' : null}>Economia Acumulada</li></Link>
+                <Link href='/accumulatedSavings'><li className={router.pathname=='/accumulatedSavings'? 'actualPathDrawer' : null}>Economia Bruta Mensal</li></Link>
-                <Link href='/estimatedCost'><li className={router.pathname=='/estimatedCost'? 'actualPathDrawer' : null}>Custo Estimado</li></Link>
+                <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>
@@ -117,7 +118,7 @@ export default function Sidebar() {
               <Typography id="modal-modal-title" variant="h6" component="h2">
                 Deseja realmente sair ?
               </Typography>
-              <Link href='/'><Button variant="contained"  sx={{mt:5}}>Sim</Button></Link>
+              <Link href='/'><Button variant="contained" onClick={() => signOut()} sx={{mt:5}}>Sim</Button></Link>
               <Button variant="contained" onClick={handleClose} color="error" sx={{mt:5 ,ml:1}}>Não</Button>
             </Box>
           </Modal>

src/contexts/AuthContext.tsx

@@ -1,7 +1,7 @@
 import React, { createContext, useState } from "react";
 import Router from 'next/router'
 
-import { setCookie } from "nookies";
+import { destroyCookie, setCookie } from "nookies";
 
 import { signInRequest } from "../services/auth";
 import { api } from "../services/api";
@@ -21,6 +21,7 @@ type AuthContextType = {
   isAuthenticated: boolean;
   user: UserType;
   signIn: (data: SignInData) => Promise<void>;
+  signOut: any;
 }
 
 export const AuthContext = createContext({} as AuthContextType)
@@ -64,8 +65,15 @@ export function AuthProvider({children}: {children: React.ReactNode}) {
     }
   }
 
+  function signOut() {
+    destroyCookie(null, 'user-name')
+    destroyCookie(null, 'user-role')
+    destroyCookie(null, 'user-id')
+    destroyCookie(null, '@smartAuth-token')
+  }
+
   return (
-    <AuthContext.Provider value={{ user, isAuthenticated, signIn }}>
+    <AuthContext.Provider value={{ user, isAuthenticated, signIn, signOut }}>
       {children}
     </AuthContext.Provider>
   )

src/pages/accumulatedSavings.tsx

@@ -16,10 +16,10 @@ export default function AccumulatedSavings({graphData, years, userName}: any) {
   return (
     <AccumulatedSavingsView>
       <Head>
-        <title>Smart Energia - Economia Acumulada</title>
+        <title>Smart Energia - Economia Bruta Mensal</title>
       </Head>
       <Header name={userName} />
-      <PageTitle title='Economia Acumulada' subtitle='Economia Bruta Estimada e Acumulada anual (Valores em R$ mil)' />
+      <PageTitle title='Economia Bruta Mensal' subtitle='Economia Bruta Estimada e Acumulada mensal (Valores em R$ mil)' />
       <section>
         <SingleBar title='Economia Bruta Estimada e Acumulada' subtitle='(Valores em R$ mil)' dataset='Consolidada'
           dataset1='Estimada' dataProps={graphData}
@@ -34,7 +34,6 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
   const { ['@smartAuth-token']: token } = parseCookies(ctx)
   const { ['user-name']: userName } = parseCookies(ctx)
 
-
   let graphData = [];
 
   await apiClient.post('/economy/grossMonthly').then(res => {

src/pages/administrative/aboutUs/index.tsx

@@ -1,64 +0,0 @@
-import TextField from '@mui/material/TextField';
-import Head from 'next/head'
-import Image from 'next/image'
-import React from 'react'
-
-import AdministrativeHeader from '../../../components/administrativeHeader/AdministrativeHeader';
-import Banner from '../../../components/banner/Banner'
-import Header from '../../../components/header/Header'
-import { AboutUsView } from '../../../styles/layouts/aboutUs/AboutUsView'
-
-export default function aboutUs() {
-  return (
-    <AboutUsView>
-      <Head>
-        <title>Smart Energia - About Us</title>
-      </Head>
-      <AdministrativeHeader />
-      <Banner title='Quem Somos' subtitle='Soluções inteligentes em Gestão de Energia' imgSource='/assets/banners/aboutUsBanner.png' />
-      <div>
-        <h4>atualizar texto</h4>
-        <TextField
-          id="outlined-textarea"
-          label="Sobre nós"
-          placeholder="Placeholder"
-          multiline
-          fullWidth
-        />
-      </div>
-      <section>
-        <p>A <strong>SMART ENERGIA</strong> é uma consultoria independente especializada em Gestão de Energia Elétrica, consolidada como uma das três maiores consultorias do Brasil.
-          Devido à grande experiência em operações na CCEE – Câmara de Comercialização de Energia Elétrica e ANEEL, entrega resultados que superam as expectativas.</p>
-
-        <p>Nasceu para gerenciar a compra de energia com inovação, transparência e imparcialidade sendo o elo forte e necessário entre os Consumidores e os
-          Vendedores de energia. </p>
-
-        <p>Baseada em sua experiência no setor elétrico adquirida desde 2001 e em mais de 900 unidades migradas, atua na negociação de contratos de compra e venda de
-          energia, na Gestão de Energia no Mercado Livre e criação de produtos diferenciados para atender as necessidades específicas dos consumidores.</p>
-
-        <p>Apoiada pela sólida experiência de seus gestores, conhecendo as premissas dos agentes de Comercialização e Geração para a compra e venda de energia,
-          aplicamos as mesmas premissas a favor dos Consumidores, disponibilizando assim um diferencial único para a tomada de decisão e elaboração das estratégias de
-          contratação de energia.</p>
-        <ul>
-          <li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Informação'}</li>
-          <li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Economia'}</li>
-          <li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Gestão de Energia'}</li>
-          <li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Imparcialidade'}</li>
-          <li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Previsão de Custos'}</li>
-          <li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Experiência'}</li>
-          <li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Relacionamento'}</li>
-        </ul>
-
-        <article>
-          <aside>
-            <h2>Apoio a projetos sociais</h2>
-            <div>
-              <Image src='/assets/stamps/whiteStamp.png' width={200} height={200} />
-              <Image src='/assets/stamps/blueStamp.png' width={200} height={200} />
-            </div>
-          </aside>
-        </article>
-      </section>
-    </AboutUsView>
-  )
-}

src/pages/administrative/clients/index.tsx

@@ -138,7 +138,7 @@ export default function clients({clients}) {
       </Snackbar>
 
       <ClientsView>
-        <Header name='' />
+        <Header name={userName} admin/>
         <PageTitle title='Clientes' subtitle='Clientes Smart Energia'/>
         <div className='buttons'>
         <button className='btn2' onClick={handleOpen}>Adicionar</button>
@@ -194,17 +194,17 @@ export default function clients({clients}) {
         }} variant="outlined" />
         <InputUpload />
         <br /><br />
-      <FaqButton1  title='Cancelar' onClick={() => {setOpen(false)}} />
+      <FaqButton1  title='Cancelar' onClick={() => setOpen(false)} />
       <FaqButton2  title='Salvar' onClick={() => handleCreateClient(client)}/>
       </Box>
       </Modal>
 
       <ConfirmModal open={openModalInativar} handleIsClose={(value) => {setOpenModalInativar(value)}}>
-        <PageTitle title='Excluir Cliente' subtitle='Deseja realmente excluir os clientes selecionadas?'/>
+        <PageTitle title='Inativar Cliente(s)' subtitle='deseja realmente inativar os clientes selecionadas?'/>
         <ConfirmModalView>
 
           <BasicButton title='Confirmar' onClick={() => handleDeleteClient(selectedClients)}/>
-          <BasicButton title='Cancelar' onClick={() => {setOpenModalInativar(false)}}/>
+          <BasicButton title='Cancelar' onClick={() => setOpenModalInativar(false)}/>
         </ConfirmModalView>
       </ConfirmModal>
     </div>

src/pages/administrative/faq/index.tsx

@@ -115,7 +115,7 @@ export default function Sidebar({faqData, userName} : any ) {
   return (
     <>
     <FaqView>
-    <Header name={userName}/>
+    <Header name={userName} admin/>
 
       <PageTitle title='Perguntas Frequentes' subtitle='Perguntas Frequentes'/>
 
@@ -145,7 +145,6 @@ export default function Sidebar({faqData, userName} : any ) {
       <button className='btn2' value="Refresh Page"onClick={handleOpen} >Adicionar</button>
       <button className='btn1' onClick={() => setOpenModalInativar(true)}>Inativar</button>
 
-
       </div>
         <Modal
         open={open}
@@ -160,16 +159,12 @@ export default function Sidebar({faqData, userName} : any ) {
           </Typography>
           <br />
 
-        <TextField id="outlined-basic" label="Pergunta" onChange={value=>setFaq({...faq, question:value.target.value})} sx={{width:710, ml:8}} variant="outlined" /> <br /><br />
+          <TextField id="outlined-basic" label="Pergunta" onChange={value=>setFaq({...faq, question:value.target.value})} sx={{width:710, ml:8}} variant="outlined" /> <br /><br />
-        <TextField id="outlined-basic" label="Resposta" onChange={value=>setFaq({...faq, answer:value.target.value})} sx={{width:710, ml:8}} variant="outlined" />
+          <TextField id="outlined-basic" label="Resposta" onChange={value=>setFaq({...faq, answer:value.target.value})} sx={{width:710, ml:8}} variant="outlined" />
 
           <br /><br />
-        <FaqButton1  title='Cancelar' onClick={function (): void {
+        <FaqButton1  title='Cancelar' onClick={() => setOpen(false)} />
-              throw new Error('Function not implemented.');
+        <FaqButton2 title='Salvar' onClick={() => handleRegisterNewFaq(faq)}/>
-            } } />
-        <FaqButton2   title='Salvar' onClick={() => handleRegisterNewFaq(faq)}
-
-        />
         </Box>
 
       </Modal>

src/pages/administrative/general.tsx

@@ -28,23 +28,9 @@ export default function index({userName}: any) {
 
   return (
     <GeneralView>
-      <Header name={userName}/>
+      <Header name={userName} admin/>
-      <PageTitle title='Sobre nós' subtitle='alterar texto de sobre nós'/>
+      <PageTitle title='Sobre nós' subtitle='Alterar texto de sobre nós'/>
-      <section>
+      <br />
-      <FormControl sx={{mr: '20px', minWidth: 180, minHeight: '80px'}}>
-        <Select
-          value={text}
-          onChange={handleChange}
-          displayEmpty
-          inputProps={{ 'aria-label': 'Without label' }}
-        >
-          <MenuItem value={0}>Sobre Nós</MenuItem>
-          <MenuItem value={10}>Copel</MenuItem>
-          <MenuItem value={20}>Cliente 1</MenuItem>
-          <MenuItem value={30}>Cliente 2</MenuItem>
-        </Select>
-      </FormControl>
-      </section>
       <Editor
         onInit={(evt, editor) => editorRef.current = editor}
         initialValue='        <p>A <strong>SMART ENERGIA</strong> é uma consultoria independente especializada em Gestão de Energia Elétrica, consolidada como uma das três maiores consultorias do Brasil.
@@ -84,7 +70,6 @@ export default function index({userName}: any) {
           content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
         }}
       />
-      <button onClick={log}>Log editor content</button>
     </GeneralView>
   )
 }

src/pages/administrative/notification/index.tsx

@@ -41,7 +41,7 @@ const style = {
   border: '2px solid #000',
   boxShadow: 24,
   p: 4,
-  overflowY: 'scroll'
+  overflowY: 'scroll',
 };
 
 const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
@@ -122,7 +122,7 @@ export default function notification({clients, notifications, userName}: any) {
       <Head>
         <title>Smart Energia - Notificações</title>
       </Head>
-      <Header name={userName}/>
+      <Header name={userName} admin/>
       <PageTitle title='Notificações' subtitle='Notificações'/>
 
       <Snackbar open={openSnackSuccess} autoHideDuration={4000} onClose={handleCloseSnack}>
@@ -178,7 +178,9 @@ export default function notification({clients, notifications, userName}: any) {
           }} variant="outlined" /> <br /><br />
 
             <div>
-              <FormControl>
+              <FormControl
+                sx={{ml:8}}
+              >
                 <RadioGroup
                   aria-labelledby="demo-radio-buttons-group-label"
                   defaultValue="female"
@@ -217,17 +219,16 @@ export default function notification({clients, notifications, userName}: any) {
                   {option.name}
                 </li>
                 )}
-                sx={{ml:8}}
                 style={{ width: 700 }}
+                sx={{ml:8}}
                 renderInput={(params) => (
                   <TextField {...params} label="Clientes" placeholder="Selecionar clientes"/>
                   )}
               /> :
               null
             }
-
+            <FaqButton1 title='Cancelar' onClick={() => {setOpen(false)}} />
-            <FaqButton1  title='Cancelar' onClick={() => {setOpen(false)}} />
+            <FaqButton2 title='Salvar' onClick={() => {
-            <FaqButton2  title='Salvar' onClick={() => {
               handleRegisterNewNotification(notification)}}
             />
           </Box>

src/pages/costIndicator.tsx

@@ -12,15 +12,28 @@ import { dataEconomiaIndicador } from '../services/economiaIndicador'
 import getAPIClient from '../services/ssrApi'
 import { CostIndicatorView } from '../styles/layouts/economy/costIndicator/CostIndicatorView'
 
-function addMissingMonths(data) {
-  // console.log(data[0].mes.slice(1, 1))
-}
-
 function verifyDataByYear(data) {
-  if (data.length === 12)
+  const currentYear = []
-    return true
+  const currentYearAux = data.filter(value => value.mes.slice(3, 7).includes('2021'))
-  else
+  console.log(currentYear.length)
-    return false
+  console.log(currentYearAux.length)
+
+  currentYearAux.sort((a, b) => {
+    if (parseFloat(a.mes.slice(0,2)) > parseFloat(b.mes.slice(1,2))) return 1
+    if (parseFloat(a.mes.slice(0,2)) < parseFloat(b.mes.slice(1,2))) return -1
+
+    return 0
+  })
+
+  // for (let i=0; currentYear.length <= currentYearAux.length; i++) {
+  //   console.log(i, 'dentro do for')
+  //   // console.log(currentYearAux.length, 'tamanho aux')
+  //   if (currentYearAux[i].mes.slice(1,2)==i) {
+  //     currentYear.push(currentYearAux[i])
+  //     console.log(currentYear.length, 'tamanho')
+  //   }
+  // }
+  console.log(currentYearAux)
 }
 
 export default function CostIndicator({graphData, userName}: any) {
@@ -34,9 +47,20 @@ export default function CostIndicator({graphData, userName}: any) {
       <Header name={userName} />
       <PageTitle title='Indicador de Custo' subtitle='Valores em R$/MWh'/>
       <section>
-        <Chart title='Indicador de Custo' subtitle='(Valores em R$/MWh)' data1={graphData.filter((value, index) => value.mes.slice(3, 7).includes('2021'))}
+        <Chart title='Indicador de Custo' subtitle='(Valores em R$/MWh)'
+        data1={graphData.filter((value, index) => value.mes.slice(3, 7).includes('2021')).sort((a, b) => {
+          if (parseFloat(a.mes.slice(0,2)) > parseFloat(b.mes.slice(1,2))) return 1
+          if (parseFloat(a.mes.slice(0,2)) < parseFloat(b.mes.slice(1,2))) return -1
+
+          return 0
+        })}
         data2={graphData.filter((value, index) => value.mes.slice(3, 7).includes('2022'))}
-        label={['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'ago', 'set', 'out', 'nov', 'dez']} barLabel />
+        label={graphData.filter((value, index) => value.mes.slice(3, 7).includes('2021')).sort((a, b) => {
+          if (parseFloat(a.mes.slice(0,2)) > parseFloat(b.mes.slice(1,2))) return 1
+          if (parseFloat(a.mes.slice(0,2)) < parseFloat(b.mes.slice(1,2))) return -1
+
+          return 0
+        }).map(value => value.mes)} barLabel />
       </section>
     </CostIndicatorView>
   )
@@ -51,7 +75,6 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
 
   await apiClient.post('/economy/MWh').then(res => {
     graphData = res.data.data
-    console.log(graphData[0].mes)
   }).catch(res => {
     console.log(res)
   })

src/pages/dashboard.tsx

@@ -23,7 +23,7 @@ import { parseCookies } from 'nookies'
 import { GetServerSideProps } from 'next'
 import getAPIClient from '../services/ssrApi'
 
-export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensalGraph, grossMensalYears, acumulatedGraph, mapsInfo, userName} : any) {
+export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensalGraph, grossMensalYears, acumulatedGraph, mapsInfo, userName, costIndicator} : any) {
   return (
     <DashboardView>
       <Head>
@@ -44,14 +44,14 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
       </Link>
 
       <section className='dashboard'>
-        <GraphCard title='Consumo' subtitle='Gráfico de Consumo'>
+        <GraphCard title='Economia Bruta Anual' subtitle='Economia Bruta Estimada e Acumulada anual'>
           <SingleBar title='Economia Bruta' subtitle='(Valores em R$ mil)'
           dataset='Consolidada' dataset1='Estimada'
           dataProps={grossAnualGraph}
           label={grossAnualYears} barLabel year/>
         </GraphCard>
 
-        <GraphCard title='Economia Acumulado' subtitle='Economia Acumulada' singleBar>
+        <GraphCard title='Economia Bruta Mensal' subtitle='Economia Bruta Estimada e Acumulada mensal' singleBar>
           <SingleBar title='Economia Bruta Estimada e Acumulada' subtitle='(Valores em R$)'
           dataset='Acumulada' dataset1='Estimado'
           dataProps={grossMensalGraph}
@@ -59,15 +59,27 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
           barLabel month/>
         </GraphCard>
 
-        <GraphCard title='Custos Estimados' subtitle='Custos Estimados em R$/MWh' singleBar>
+        <GraphCard title='Cativo x Livre mensal' subtitle='Comparativo de Custo Estimado' singleBar>
           <LineBarChart2 data1={acumulatedGraph} data2={acumulatedGraph} data3={acumulatedGraph}
           label={ConsumoEstimado.label} dataset1='Custo' dataset2='Cativo' dataset3='Livre'
           title='Custo Estimado' subtitle='(Valores em R$/MWh)' barLabel hashurado/>
         </GraphCard>
 
         <GraphCard title='Indicador de Custo' subtitle='Valores em R$/ MWh'>
-          <Chart title='Indicador de Custo' subtitle='(Valores em R$/MWh)' data1={dataEconomiaIndicador.data1} data2={dataEconomiaIndicador.data2}
+        <Chart title='Indicador de Custo' subtitle='(Valores em R$/MWh)'
-          label={dataEconomiaIndicador.labels} barLabel/>
+        data1={costIndicator.filter((value, index) => value.mes.slice(3, 7).includes('2021')).sort((a, b) => {
+          if (parseFloat(a.mes.slice(0,2)) > parseFloat(b.mes.slice(1,2))) return 1
+          if (parseFloat(a.mes.slice(0,2)) < parseFloat(b.mes.slice(1,2))) return -1
+
+          return 0
+        })}
+        data2={costIndicator.filter((value, index) => value.mes.slice(3, 7).includes('2022'))}
+        label={costIndicator.filter((value, index) => value.mes.slice(3, 7).includes('2021')).sort((a, b) => {
+          if (parseFloat(a.mes.slice(0,2)) > parseFloat(b.mes.slice(1,2))) return 1
+          if (parseFloat(a.mes.slice(0,2)) < parseFloat(b.mes.slice(1,2))) return -1
+
+          return 0
+        }).map(value => value.mes)} barLabel />
         </GraphCard>
       </section>
 
@@ -86,6 +98,7 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
   let grossAnualGraph = [];
   let grossMensalGraph = [];
   let acumulatedGraph = [];
+  let costIndicator = []
   let mapsInfo = [];
 
   await apiClient.post('/economy/grossAnnual').then(res => {
@@ -106,6 +119,12 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
     console.log(res)
   })
 
+  await apiClient.post('/economy/MWh').then(res => {
+    costIndicator = res.data.data
+  }).catch(res => {
+    console.log(res)
+  })
+
   await apiClient.post('/pld/overview').then(res => {
     mapsInfo = res.data.data
   }).catch(res => {
@@ -131,6 +150,7 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
       grossMensalYears,
       grossMensalGraph,
       acumulatedGraph,
+      costIndicator,
       mapsInfo,
 
       userName

src/pages/estimatedCost.tsx

@@ -23,7 +23,7 @@ export default function EstimatedCost({graphData, userName}: any) {
       <section>
         <LineBarChart2 data1={graphData} data2={graphData} data3={graphData}
         dataset1="Economia (R$)" dataset2='Cativo' dataset3='Livre'
-        label={ConsumoEstimado.label} title='Custo Estimado' subtitle='' barLabel hashurado />
+        label={ConsumoEstimado.label} title='Cativo x Livre mensal' subtitle='' barLabel hashurado />
       </section>
     </EstimatedCostView>
   )

src/pages/grossSavings.tsx

@@ -23,7 +23,6 @@ function verifyDataByYear(data) {
     return false
 }
 
-
 export default function GrossSavings({graphData, years, userName}: any) {
   return (
     <GrossSavingsView>
@@ -31,7 +30,7 @@ export default function GrossSavings({graphData, years, userName}: any) {
         <title>Smart Energia - Economia Acumulada</title>
       </Head>
       <Header name={userName} />
-      <PageTitle title='Economia Bruta' subtitle='Economia Bruta Estimada e Acumulada anual (Valores em R$ mil)' />
+      <PageTitle title='Economia Bruta Anual' subtitle='Economia Bruta Estimada e Acumulada anual (Valores em R$ mil)' />
       <section>
         <SingleBar title='Economia Bruta' subtitle='(Valores em R$ mil)'
         dataset='Consolidada' dataset1='Estimada'
@@ -43,6 +42,7 @@ export default function GrossSavings({graphData, years, userName}: any) {
     </GrossSavingsView>
   )
 }
+
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
   const apiClient = getAPIClient(ctx)
   const { ['@smartAuth-token']: token } = parseCookies(ctx)

src/pages/pld/index.tsx

@@ -115,26 +115,23 @@ export default function pld({tableData, graphByHourData, graphByMonthData, userN
     }).catch(exception => console.log(exception))
   }
 
+  function handleColorNorte(value, region) {
+    if (value <= tableData.result[1].norte_min)
+      return 'green'
+    else if (value >= tableData.result[0][`${region}_max`])
+      return 'red'
+    else if (tableData.result[0][`${region}_max`] - value > tableData.result[0][`${region}_max`]/2)
+      return 'dullGreen'
+    else if (tableData.result[1][`${region}_min`] - value <= tableData.result[1][`${region}_min`])
+      return 'dullRed'
+  }
+
   useEffect(() => {
     getDataByHour()
     getDataByDay()
     console.log(dataByDay)
   }, [date, day, select])
 
-  function handleCellColor(minimo, mi, ma, maximo) {
-    if (minimo - mi >= 100 && minimo - mi < 200) {
-      return 'green'
-    } else if ( mi*2 >= 200 && mi*2 < 250 ) {
-      return'dullGreen'
-    } else if ( (ma-mi)/2 >=250 && (ma-mi)/2 < 300 ) {
-      return 'white'
-    } else if ( ma/2 >= 300 && ma/2 < 600 ) {
-      return 'dullRed'
-    } else if ( maximo-ma > 600 ) {
-      return 'red'
-    }
-  }
-
   return (
     <main style={{
       width: '100%',
@@ -159,39 +156,53 @@ export default function pld({tableData, graphByHourData, graphByMonthData, userN
             </thead>
             <tbody>
               {
-                tableData.map(data => {
+                tableData.data.map(data => {
                   return <>
                     <tr>
                       <td className='tg-gceh'>{data.year_month_formatted}</td>
-                      <td className='tg-uulg red'>{data.nordeste}</td>
+                      <td className={`tg-uulg ${handleColorNorte(parseFloat(data.norte), 'nordeste')}`}>{parseFloat(data.nordeste).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
-                      <td className='tg-gceh dullRed'>{data.norte}</td>
+                      <td className={`tg-gceh ${handleColorNorte(parseFloat(data.norte), 'norte')}`}>{parseFloat(data.norte).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
-                      <td className='tg-gceh dullGreen'>{data.sudeste}</td>
+                      <td className={`tg-gceh ${handleColorNorte(parseFloat(data.norte), 'sudeste')}`}>{parseFloat(data.sudeste).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
-                      <td className='tg-uulg red'>{data.sul}</td>
+                      <td className={`tg-uulg ${handleColorNorte(parseFloat(data.norte), 'sul')}`}>{parseFloat(data.sul).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
                     </tr>
                   </>
                 })
               }
-              <tr>
+              {
-                <td className='tg-gceh'>Mín</td>
+                tableData.result.map((data, index) => {
-                <td className='tg-uulg'>xxxx</td>
+                  if (index === 0) {
-                <td className='tg-gceh'>xxxx</td>
+                    return <>
-                <td className='tg-gceh'>xxxx</td>
+                      <tr>
-                <td className='tg-uulg'>xxxx</td>
+                        <td className='tg-gceh'>Max</td>
-              </tr>
+                        <td className='tg-uulg'>{parseFloat(data.nordeste_max).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
-              <tr>
+                        <td className='tg-gceh'>{parseFloat(data.norte_max).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
-                <td className='tg-gceh'>Max</td>
+                        <td className='tg-gceh'>{parseFloat(data.sudeste_max).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
-                <td className='tg-uulg'>xxxx</td>
+                        <td className='tg-uulg'>{parseFloat(data.sul_max).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
-                <td className='tg-gceh'>xxxx</td>
+                      </tr>
-                <td className='tg-gceh'>xxxx</td>
+                    </>
-                <td className='tg-uulg'>xxxx</td>
+                  } else if (index===1) {
-              </tr>
+                    return <>
-              <tr>
+                      <tr>
-                <td className='tg-gceh'>Desv Pad</td>
+                        <td className='tg-gceh'>Min</td>
-                <td className='tg-uulg'>xxxx</td>
+                        <td className='tg-uulg'>{parseFloat(data.nordeste_min).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
-                <td className='tg-gceh'>xxxx</td>
+                        <td className='tg-gceh'>{parseFloat(data.norte_min).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
-                <td className='tg-gceh'>xxxx</td>
+                        <td className='tg-gceh'>{parseFloat(data.sudeste_min).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
-                <td className='tg-uulg'>xxxx</td>
+                        <td className='tg-uulg'>{parseFloat(data.sul_min).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
-              </tr>
+                      </tr>
+                    </>
+                  } else if (index===2) {
+                    return <>
+                      <tr>
+                        <td className='tg-gceh'>Desv. Padrão</td>
+                        <td className='tg-uulg'>{parseFloat(data.nordeste_desv_pad).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
+                        <td className='tg-gceh'>{parseFloat(data.norte_desv_pad).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
+                        <td className='tg-gceh'>{parseFloat(data.sudeste_desv_pad).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
+                        <td className='tg-uulg'>{parseFloat(data.sul_desv_pad).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
+                      </tr>
+                    </>
+                  }
+                })
+              }
             </tbody>
           </table>
           <section>
@@ -235,7 +246,7 @@ export default function pld({tableData, graphByHourData, graphByMonthData, userN
                     width: '22%',
                     ml: 1
                   }}>
-              <InputLabel id="demo-simple-select-label">Dia</InputLabel>
+              <InputLabel id="demo-simple-select-label">Mês</InputLabel>
               <Select
                   value={day}
                   onChange={handleChangeDay}
@@ -256,24 +267,6 @@ export default function pld({tableData, graphByHourData, graphByMonthData, userN
                   <MenuItem value={'10'}>10</MenuItem>
                   <MenuItem value={'11'}>11</MenuItem>
                   <MenuItem value={'12'}>12</MenuItem>
-                  <MenuItem value={'13'}>13</MenuItem>
-                  <MenuItem value={'14'}>14</MenuItem>
-                  <MenuItem value={'15'}>15</MenuItem>
-                  <MenuItem value={'16'}>16</MenuItem>
-                  <MenuItem value={'17'}>17</MenuItem>
-                  <MenuItem value={'18'}>18</MenuItem>
-                  <MenuItem value={'19'}>19</MenuItem>
-                  <MenuItem value={'20'}>20</MenuItem>
-                  <MenuItem value={'21'}>21</MenuItem>
-                  <MenuItem value={'22'}>22</MenuItem>
-                  <MenuItem value={'23'}>23</MenuItem>
-                  <MenuItem value={'24'}>24</MenuItem>
-                  <MenuItem value={'25'}>25</MenuItem>
-                  <MenuItem value={'26'}>26</MenuItem>
-                  <MenuItem value={'27'}>27</MenuItem>
-                  <MenuItem value={'28'}>28</MenuItem>
-                  <MenuItem value={'29'}>29</MenuItem>
-                  <MenuItem value={'30'}>30</MenuItem>
                 </Select>
               </FormControl>
           </section>
@@ -312,7 +305,7 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
   let tableData = [];
 
   await apiClient.post('/pld/list').then(res => {
-    tableData = res.data.data
+    tableData = res.data
   }).catch(res => {
     console.log(res)
   })

src/pages/resumoOperacao.tsx

@@ -20,13 +20,15 @@ import data from '../services/dados.json'
 import getAPIClient from '../services/ssrApi';
 import { Pagination, TableView } from '../styles/layouts/ResumoOperacao/ResumoOperacaoView';
 
-export default function ResumoOperacao({tableData, userName}: any) {
+export default function ResumoOperacao({tableData, clientsData, userName, clientMonth}: any) {
   const csvData = tableData;
 
   const [month, setMonth] = useState('');
   const [unidade, setUnidade] = useState('');
   const [tableDataState, setTableDataState] = useState<any>([]);
 
+  const monthLabels = ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'ago', 'set', 'out', 'nov', 'dez']
+
   const handleChangeMonth = (event: SelectChangeEvent) => {
     setMonth(event.target.value);
   };
@@ -36,7 +38,7 @@ export default function ResumoOperacao({tableData, userName}: any) {
 
   useEffect(() => {
     if (unidade!=='' || month!==''){
-      api.post('/operation', {
+      api.post('/operation/summary', {
         "filters": [
             {"type" : "=", "field": "mes", "value": `${month}/2022`},
             {"type" : "=", "field": "dados_te.cod_smart_unidade", "value": unidade}
@@ -49,7 +51,6 @@ export default function ResumoOperacao({tableData, userName}: any) {
     } else {
       setTableDataState(tableData)
     }
-
   }, [month, unidade])
 
   return (
@@ -73,7 +74,7 @@ export default function ResumoOperacao({tableData, userName}: any) {
           >
             <MenuItem key={1} value={''}>Nenhum</MenuItem>
             {
-              tableData.map((value) => {
+              clientsData.map((value) => {
                 return <MenuItem key={1} value={value.cod_smart_unidade}>{value.cod_smart_unidade}</MenuItem>
               })
             }
@@ -90,18 +91,11 @@ export default function ResumoOperacao({tableData, userName}: any) {
             onChange={handleChangeMonth}
           >
             <MenuItem value={''}>Nenhum</MenuItem>
-            <MenuItem value={'01'}>Janeiro</MenuItem>
+            {
-            <MenuItem value={'02'}>Fevereiro</MenuItem>
+              clientMonth.map((value) => {
-            <MenuItem value={'03'}>Março</MenuItem>
+                return <MenuItem key={1} value={value.mes}>{monthLabels[parseFloat(value.mes.slice(3, 4))-1]}</MenuItem>
-            <MenuItem value={'04'}>Abril</MenuItem>
+              })
-            <MenuItem value={'05'}>Maio</MenuItem>
+            }
-            <MenuItem value={'06'}>Junho</MenuItem>
-            <MenuItem value={'07'}>Julho</MenuItem>
-            <MenuItem value={'08'}>Agosto</MenuItem>
-            <MenuItem value={'09'}>Setembro</MenuItem>
-            <MenuItem value={'10'}>Outubro</MenuItem>
-            <MenuItem value={'11'}>Novembro</MenuItem>
-            <MenuItem value={'12'}>Dezembro</MenuItem>
           </Select>
         </FormControl>
       </div>
@@ -125,8 +119,8 @@ export default function ResumoOperacao({tableData, userName}: any) {
                   <td key={index} className='tg-uulg'>{value.operacao}</td>
                   <td key={index} className='tg-gceh'>{value.montante_nf}</td>
                   <td key={index} className='tg-gceh'>{value.contraparte}</td>
-                  <td key={index} className='tg-uulg'>{value.nf_c_icms}</td>
+                  <td key={index} className='tg-uulg'>{parseFloat(value.nf_c_icms).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
-                  <td key={index} className='tg-gceh'>{value.preco_nf}</td>
+                  <td key={index} className='tg-gceh'>{parseFloat(value.preco_nf).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
                 </tr>
               </>
             })
@@ -150,17 +144,36 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
   const { ['user-name']: userName } = parseCookies(ctx)
 
   let tableData = [];
+  let clientsData = [];
+  let clientMonth = [];
 
-  await apiClient.post('/operation', {
+  await apiClient.post('/operation/summary', {
     "filters": []
   }).then(res => {
-    console.log(res.data.data)
     tableData = res.data.data
   }).catch(res => {
     console.log(res)
   })
 
-  console.log(tableData)
+  await apiClient.post('/operation', {
+    "filters": [],
+    "fields": ["cod_smart_unidade"],
+    "distinct": true
+  }).then(res => {
+    clientsData = res.data.data
+  }).catch(res => {
+    console.log(res)
+  })
+
+  await apiClient.post('/operation', {
+    "filters": [],
+    "fields": ["mes"],
+    "distinct": true
+  }).then(res => {
+    clientMonth = res.data.data
+  }).catch(res => {
+    console.log(res)
+  })
 
   if (!token) {
     return {
@@ -174,6 +187,8 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
   return {
     props: {
       tableData,
+      clientsData,
+      clientMonth,
       userName
     }
   }

src/styles/layouts/pld/PldView.ts

@@ -83,19 +83,23 @@ export const PldTableView = styled.main`
   }
 
   .green {
-    background-color: #00A934!important;
+    background-color: #0F9D58!important;
+    color: black!important;
   }
 
   .dullGreen {
     background-color: #AED094!important;
+    color: black!important;
   }
 
   .red {
-    background-color: #FF5429!important;
+    background-color: #DB4437!important;
+    color: black!important;
   }
 
   .dullRed {
     background-color: #FFAA95!important;
+    color: black!important;
   }
 
   h3{