:feature: add economy pages

pages/accumulatedSavings.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import Chart from '../src/components/graph/Chart'
+import Header from '../src/components/header/Header'
+
+import { AccumulatedSavingsView } from '../styles/layouts/economy/accumulatedSavings/AccumulatedSavingsView'
+
+export default function AccumulatedSavings() {
+  return (
+    <AccumulatedSavingsView>
+      <Header name='' />
+      <section>
+        <h1>Economia Acumulada</h1>
+        <span>Economia Bruta Estimada e Acumulada anual (Valores em R$ mil)</span>
+      </section>
+      <section>
+        <Chart title='Indicador de custo' />
+      </section>
+    </AccumulatedSavingsView>
+  )
+}

pages/costIndicator.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+
+import Chart from '../src/components/graph/Chart'
+import Header from '../src/components/header/Header'
+import { CostIndicatorView } from '../styles/layouts/economy/costIndicator/CostIndicatorView'
+
+export default function CostIndicator() {
+  return (
+    <CostIndicatorView>
+      <Header name='' />
+      <section>
+        <h1>Indicador de Custo</h1>
+        <span>Valores em R$/MWh</span>
+      </section>
+      <section>
+        <Chart title='Indicador de custo' />
+      </section>
+    </CostIndicatorView>
+  )
+}

pages/estimatedCost.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import Chart from '../src/components/graph/Chart'
+import Header from '../src/components/header/Header'
+
+import { EstimatedCostView } from '../styles/layouts/economy/estimatedCost/EstimatedCostView'
+
+export default function EstimatedCost() {
+  return (
+    <EstimatedCostView>
+      <Header name='' />
+      <section>
+        <h1>Custo Estimado</h1>
+        <span>Comparativo de Custo Estimado</span>
+      </section>
+      <section>
+        <Chart title='Indicador de custo' />
+      </section>
+    </EstimatedCostView>
+  )
+}

pages/grossSavings.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import Chart from '../src/components/graph/Chart'
+import Header from '../src/components/header/Header'
+
+import { GrossSavingsView } from '../styles/layouts/economy/grossSavings/GrossSavings'
+
+export default function GrossSavings() {
+  return (
+    <GrossSavingsView>
+      <Header name='' />
+      <section>
+        <h1>Economia Bruta</h1>
+        <span>Economia Bruta Estimada e Acumulada anual (Valores em R$ mil)</span>
+      </section>
+      <section>
+        <Chart title='Indicador de custo' />
+      </section>
+    </GrossSavingsView>
+  )
+}

pages/resumoOperacao.tsx

@@ -13,77 +13,71 @@ export default function ResumoOperacao() {
       <h1>Resumo de Operaçoes</h1>
       <h2>Operações detalhadas</h2>
       <h3>Seletor Mês</h3>
-      <table className='tg' >
-        <colgroup>
-          <col style={{width: "106px"}}/>
-          <col style={{width: "16px"}}/>
-          <col style={{width: "119px"}}/>
-          <col style={{width: "334px"}}/>
-          <col style={{width: "111px"}}/>
-          <col style={{width: "146px"}}/>
-        </colgroup>
 
+      <table className="tg">
 <thead>
   <tr>
-            <th className='tg-baqh'>Unidade</th>
+    <th className='tg-8oo6'>Unidade </th>
-            <th className='tg-baqh'>Operação</th>
+    <th className='tg-8oo6'>Operação</th>
-            <th className='tg-baqh'>Montante(MWh)</th>
+    <th className='tg-8oo6'>Montante (MWh)</th>
-            <th className='tg-baqh'>Contraparte</th>
+    <th className='tg-8oo6'>Contraparte</th>
-            <th className='tg-baqh'>Preço(R$/MWh)</th>
+    <th className='tg-8oo6'>Preço(R$/MWh)</th>
-            <th className='tg-0lax'>Valor NF/Crédito (R$)</th>
+    <th className='tg-8oo6'>ValorNF/Crédito(R$)</th>
   </tr>
 </thead>
 <tbody>
   <tr>
-            <td className='tg-womg'>Unidade-19888</td>
+    <td className='tg-gceh'>Unidade - 9500130</td>
-            <td className='tg-womg'>comprar</td>
+    <td className='tg-uulg'>Compra</td>
-            <td className='tg-womg'>122.269</td>
+    <td className='tg-gceh'>122,269</td>
-            <td className='tg-womg'>COPEL COM I5</td>
+    <td className='tg-gceh'>COPEL COM I5</td>
-            <td className='tg-womg'>234,67</td>
+    <td className='tg-uulg'>234,67</td>
-            <td className='tg-womg'>38.257,15</td>
+    <td className='tg-gceh'>38.257,15</td>
   </tr>
   <tr>
-            <th className='tg-baqh'>Unidade-19888</th>
+    <td className='tg-hq65'>Unidade - 9500130</td>
-            <th className='tg-baqh'>Comprar</th>
+    <td className='tg-0tzy'>Compra</td>
-            <th className='tg-baqh'>122.269</th>
+    <td className='tg-hq65'>110,348</td>
-            <th className='tg-baqh'>PACTO COMERCIALIZADORA I5</th>
+    <td className='tg-hq65'>EMEWE I5</td>
-            <th className='tg-baqh'>234,67</th>
+    <td className='tg-0tzy'>190,16</td>
-            <th className='tg-baqh'>38.257,15</th>
+    <td className='tg-hq65'>27.978,37</td>
   </tr>
-
   <tr>
-            <td className='tg-womg'>Unidade-19888</td>
+    <td className="tg-gceh">Unidade - 9500130</td>
-            <td className='tg-womg'>Comprar</td>
+    <td className="tg-uulg">Compra</td>
-            <td className='tg-womg'>122.269</td>
+    <td className="tg-gceh">13,074</td>
-            <td className='tg-womg'>PACTO COMERCIALIZADORA I5</td>
+    <td className="tg-gceh">PACTO COMERCIALIZADORA I5</td>
-            <td className='tg-womg'>234,67</td>
+    <td className="tg-gceh">300,36</td>
-            <td className='tg-womg'>38.257,15</td>
+    <td className="tg-gceh">5.235,88</td>
   </tr>
-
   <tr>
-            <td className='tg-baqh'>Unidade-19888</td>
+    <td className='tg-hq65'>Unidade - 9500130</td>
-            <td className='tg-baqh'>Comprar</td>
+    <td className='tg-0tzy'>Compra</td>
-            <td className='tg-baqh'>122.269</td>
+    <td className='tg-hq65'>133,117</td>
-            <td className='tg-baqh'>PACTO COMERCIALIZADORA I5</td>
+    <td className='tg-hq65'>COPEL COM I5</td>
-            <td className='tg-baqh'>234,67</td>
+    <td className='tg-0tzy'>300,36</td>
-            <td className='tg-baqh'>38.257,15</td>
+    <td className='tg-hq65'>41.651,42</td>
   </tr>
-
   <tr>
-            <td className='tg-womg'>Unidade-19888</td>
+    <td className='tg-gceh'>Unidade - 9500130</td>
-            <td className='tg-womg'>Comprar</td>
+    <td className='tg-uulg'>Compra</td>
-            <td className='tg-womg'>122.269</td>
+    <td className='tg-gceh'>120,138</td>
-            <td className='tg-womg'>PACTO COMERCIALIZADORA I5</td>
+    <td className='tg-gceh'>EMEWE I5</td>
-            <td className='tg-womg'>234,67</td>
+    <td className='tg-uulg'>234,67</td>
-            <td className='tg-womg'>38.257,15</td>
+    <td className='tg-gceh'>30.460,59</td>
+  </tr>
+  <tr>
+    <td className='tg-hq65'>Unidade - 9500130</td>
+    <td className='tg-0tzy'>Compra</td>
+    <td className='tg-hq65'>14,897</td>
+    <td className='tg-hq65'>PACTO COMERCIALIZADORA I5</td>
+    <td className='tg-0tzy'>300,36</td>
+    <td className='tg-hq65'>5.965,95</td>
   </tr>
-
-
 </tbody>
-
-
 </table>
 
+
     </TableView>
 
   )

src/components/header/HeaderView.ts

@@ -7,7 +7,7 @@ export const HeaderView = styled.header`
 
   flex-direction: row;
 
-  height: 5rem;
+  height: 10rem;
 
   section {
     display: flex;

src/components/sidebar/Sidebar.tsx

@@ -3,6 +3,7 @@ import Image from 'next/image'
 import { useRouter } from 'next/router'
 
 import { SidebarView } from './SidebarView'
+import Link from 'next/link'
 
 export default function Sidebar() {
   const [ economiaDrawer, setEconomiaDrawer ] = useState(false)
@@ -22,22 +23,22 @@ export default function Sidebar() {
         <Image src='/assets/logo.svg' width={100} height={100} />
       </div>
       <ul>
-        <li className={router.pathname=='/dashboard'? 'actualPath' : null} >{'Visão Geral'}</li>
+        <Link href='/dashboard'><li className={router.pathname=='/dashboard'? 'actualPath' : null} >{'Visão Geral'}</li></Link>
-        <li className={router.pathname=='/consumption'? 'actualPath' : null} >{'Consumo'}</li>
+        <Link href='/consumption'><li className={router.pathname=='/consumption'? 'actualPath' : null} >{'Consumo'}</li></Link>
-        <li>{'Resumo de Op. >'}</li>
+        <Link href='/resumoOperacao'><li className={router.pathname=='/resumoOperacao'? 'actualPath' : null} >{'Resumo de Op. '}</li></Link>
-        <li onClick={() => setEconomiaDrawer(!economiaDrawer)} >{'Economia >'}</li>
+        <li onClick={() => setEconomiaDrawer(!economiaDrawer)} className={router.pathname=='/grossSavings' || router.pathname=='/accumulatedSavings' || router.pathname=='/estimatedCost' || router.pathname=='/costIndicator' ? 'actualPath' : null } >{'Economia >'}</li>
         <div className='economiaDrawer drawer' >
-          <li>Economia Bruta</li>
+        <Link href='/grossSavings'><li>Economia Bruta</li></Link>
-          <li>Economia Acumulada</li>
+        <Link href='/accumulatedSavings'><li>Economia Acumulada</li></Link>
-          <li>Custo Estimado</li>
+        <Link href='/estimatedCost'><li>Custo Estimado</li></Link>
-          <li>Custo R/MWh</li>
+        <Link href='/costIndicator'><li>Custo R/MWh</li></Link>
         </div>
-        <li>{'Notícias >'}</li>
+        <Link href='#'><li className={router.pathname=='/news'? 'actualPath' : null}>{'Notícias >'}</li></Link>
-        <li>{'Info Setorial >'}</li>
+        <Link href='#'><li className={router.pathname=='/sectorialInfo'? 'actualPath' : null}>{'Info Setorial >'}</li></Link>
-        <li>{'SAQ >'}</li>
+        <Link href='#'><li className={router.pathname=='/saq'? 'actualPath' : null}>{'SAQ >'}</li></Link>
-        <li>{'Sobre Nós >'}</li>
+        <Link href='#'><li className={router.pathname=='/aboutus'? 'actualPath' : null}>{'Sobre Nós >'}</li></Link>
-        <li>{'Notificação >'}</li>
+        <Link href='#'><li className={router.pathname=='/notification'? 'actualPath' : null}>{'Notificação >'}</li></Link>
-        <li>{'Telemetria >'}</li>
+        <Link href='#'><li className={router.pathname=='/telemetry'? 'actualPath' : null}>{'Telemetria >'}</li></Link>
       </ul>
       <aside>
         <p>Nossos Gerentes estão prontos para atendê-los</p>

styles/layouts/ResumoOperacao/ResumoOperacaoView.ts

@@ -9,13 +9,79 @@ export const TableView = styled.div`
     align-items: flex-start;
     width: 100%;
     height: 100%;
+
+
 .tg{
   border-collapse:collapse;
   border-spacing:0;
-
+  font-family:Poppins;
+  width: 100%;
 
 }
+
 .tg td{
+  border-color:#DDDFE1;
+  border-style:solid;
+  border-width:1px;
+  font-family:Poppins;
+  font-size: 10px;
+  overflow:hidden;
+  padding:17px 30px;
+  word-break:normal;
+}
+
+
+.tg th{
+  border-color:#DDDFE1;
+  border-style:solid;
+  border-width:1px;
+  font-family:Poppins;
+  font-size:10px;
+  font-weight:500;
+  overflow:hidden;
+  padding:10px 5px;
+  word-break:normal;
+}
+.tg .tg-8oo6{
+  color:#464a53;
+  font-size:13px;
+  text-align:center;
+  vertical-align:top;
+  padding: 10px 18px;
+  text-align: center;
+}
+.tg .tg-uulg{
+  background-color:#efefef;
+  color:#abafb3;
+  font-size:14px;
+  text-align:center;
+  vertical-align:top
+}
+.tg .tg-gceh{
+  background-color:#efefef;
+  color:#6a707e;
+  font-size:14px;
+  text-align:center;
+  vertical-align:top
+}
+.tg .tg-0tzy{
+  color:#abafb3;
+  font-size:14px;
+  text-align:center;
+  vertical-align:top
+}
+.tg .tg-hq65{color:#6a707e;
+  font-size:14px;
+  text-align:center;
+  vertical-align:top
+}
+
+h1{
+    color: #000;
+    font-family: Poppins;
+    font-size: 15px;
+  }
+  /* .tg td{
     border-color:black;
     border-style:solid;
     border-width:1px;
@@ -36,7 +102,7 @@ export const TableView = styled.div`
     overflow:hidden;
     padding:10px 5px;
     word-break:normal;
-  }
+  } */
 
   .tg .tg-baqh{
     text-align:center;
@@ -70,5 +136,6 @@ export const TableView = styled.div`
     color: #254F7F;
     font-family: Poppins;
     font-size: 15px;
+    margin-top: 5rem;
     }
 `;

styles/layouts/economy/accumulatedSavings/AccumulatedSavingsView.ts

@@ -0,0 +1,26 @@
+import styled from "styled-components";
+
+export const AccumulatedSavingsView = styled.main`
+  display: flex;
+  flex-direction: column;
+
+  width: 100%;
+
+  span {
+    color: #969BA0;
+
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 24px;
+  }
+
+  section {
+    margin-bottom: 160px;
+
+    canvas {
+      max-height: 30rem;
+    }
+  }
+`

styles/layouts/economy/costIndicator/CostIndicatorView.ts

@@ -0,0 +1,26 @@
+import styled from "styled-components";
+
+export const CostIndicatorView = styled.main`
+  display: flex;
+  flex-direction: column;
+
+  width: 100%;
+
+  span {
+    color: #969BA0;
+
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 24px;
+  }
+
+  section {
+    margin-bottom: 160px;
+
+    canvas {
+      max-height: 30rem;
+    }
+  }
+`

styles/layouts/economy/estimatedCost/EstimatedCostView.ts

@@ -0,0 +1,26 @@
+import styled from "styled-components";
+
+export const EstimatedCostView = styled.main`
+  display: flex;
+  flex-direction: column;
+
+  width: 100%;
+
+  span {
+    color: #969BA0;
+
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 24px;
+  }
+
+  section {
+    margin-bottom: 160px;
+
+    canvas {
+      max-height: 30rem;
+    }
+  }
+`

styles/layouts/economy/grossSavings/GrossSavings.ts

@@ -0,0 +1,26 @@
+import styled from "styled-components";
+
+export const GrossSavingsView = styled.main`
+  display: flex;
+  flex-direction: column;
+
+  width: 100%;
+
+  span {
+    color: #969BA0;
+
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 24px;
+  }
+
+  section {
+    margin-bottom: 160px;
+
+    canvas {
+      max-height: 30rem;
+    }
+  }
+`