Merge branch 'feature/telemetry2' into 'dev'

Feature/telemetry2

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

pages/news.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import Banner from '../src/components/banner/Banner'
+import Header from '../src/components/header/Header'
+import BasicButton from '../src/components/buttons/basicButton/BasicButton';
+import { NewsView, Button } from '../styles/layouts/news/NewsView'
+
+export default function aboutUs() {
+  return (
+    <NewsView>
+      <Header name='' />
+      <Banner title='Notícias' subtitle='Tudo de importante no setor de energia' imgSource='/assets/banners/news.png' />
+
+      <section>
+        <h2>19 Abril 2022</h2>
+        <strong>ANEEL APROVA REAJUSTE TARIFÁRIO ANUAL DA ENERGISA SERGIPE DE 16,46 % PARA O CONSUMIDOR RESIDENCIAL</strong>
+        <br />
+        <br />
+        <p>A Agência Nacional de Energia Elétrica (ANEEL) aprovou, nesta terça-feira (19/04) o reajuste tarifário anual da Energisa Sergipe – Distribuidora de Energia S.A (ESE).
+          As novas tarifas da empresa, que atende cerca de e 825 mil unidades consumidoras no Sergipe, entram em vigor nesta sexta, 22/04, com reajuste de 16,46 % para
+          o consumidor residencial. <br />
+          Os itens que mais impactaram a correção foram os encargos setoriais, os custos de distribuição, a retirada dos componentes financeiros..</p>
+        <Button>
+        <fieldset>
+        <legend> <BasicButton  title='Ver Mais...' /></legend>
+        </fieldset>
+        </Button>
+
+          <h2>19 Abril 2022</h2>
+        <strong>NEEL APROVA REAJUSTE MÉDIO DE 20,36% NA TARIFA DE ENERGIA NO RN</strong>
+        <br />
+        <br />
+        <p>A Agência Nacional de Energia Elétrica (ANEEL) aprovou, nesta terça-feira (19/04) o reajuste tarifário anual da Energisa Sergipe – Distribuidora de Energia S.A (ESE).
+          As novas tarifas da empresa, que atende cerca de e 825 mil unidades consumidoras no Sergipe, entram em vigor nesta sexta, 22/04, com reajuste de 16,46 % para
+          o consumidor residencial. <br />
+          Os itens que mais impactaram a correção foram os encargos setoriais, os custos de distribuição, a retirada dos componentes financeiros..</p>
+        <Button>
+        <fieldset>
+        <legend> <BasicButton  title='Ver Mais...' /></legend>
+        </fieldset>
+        </Button>
+      </section>
+    </NewsView>
+  )
+}

pages/resumoOperacao.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
+import Header from '../src/components/header/Header';
+import PageTitle from '../src/components/pageTitle/PageTitle';
 import BasicButton from '../src/components/buttons/basicButton/BasicButton';
-import Sidebar from '../src/components/sidebar/Sidebar';
+import { TableView, Pagination } from '../styles/layouts/ResumoOperacao/ResumoOperacaoView';
-
-import { TableView } from '../styles/layouts/ResumoOperacao/ResumoOperacaoView';
 
 export default function ResumoOperacao() {
   return(
@@ -12,7 +12,7 @@ export default function ResumoOperacao() {
 
       <h3>Seletor Mês</h3>
       <table className="tg">
-<thead>
+        <thead>
           <tr>
             <th className='tg-8oo6'>Unidade </th>
             <th className='tg-8oo6'>Operação</th>
@@ -21,8 +21,8 @@ export default function ResumoOperacao() {
             <th className='tg-8oo6'>Preço(R$/MWh)</th>
             <th className='tg-8oo6'>ValorNF/Crédito(R$)</th>
           </tr>
-</thead>
+        </thead>
-<tbody>
+        <tbody>
           <tr>
             <td className='tg-gceh'>Unidade - 9500130</td>
             <td className='tg-uulg'>Compra</td>
@@ -71,11 +71,14 @@ export default function ResumoOperacao() {
             <td className='tg-0tzy'>300,36</td>
             <td className='tg-hq65'>5.965,95</td>
           </tr>
-</tbody>
+        </tbody>
-</table>
+      </table>
+      <BasicButton title='Baixar PDF' />
 
-<BasicButton title='Enviar PDF' />
+      <Pagination>
-<p>Mostando de 1 a 10 de 30 Entradas</p>
+      <p>Mostrando 1 a 10 de 30 Entradas</p>
+      <p >Anterior <span className='number'>01</span>     <span className='numberColor'>02  ..  05</span>  <span className='number'>Proxima</span> </p>
+      </Pagination>
 
     </TableView>
 

pages/telemetria.tsx

@@ -23,7 +23,7 @@ export default function Telemetria() {
   return(
 
     <TelemetriaView>
-<Header name='' />
+      <Header name='' />
       <Banner title ='Telemetria' subtitle='Dados Coletados do Sistema de Coleta de Dados de Energia -
               SCDE da Câmara de Comercialização de Energia Elétrica - CCEE,
               sendo que as quantidades aqui informadas são de responsabilidade do agente de medição

src/components/buttons/basicButton/BasicButtonView.ts

@@ -4,8 +4,9 @@ export const BasicButtonView = styled.button`
   display: flex;
   justify-content: center;
   align-items: center;
+  margin-top: 10px;
 
-  width: 120px;
+  width: 140px;
   height: 45px;
   cursor: pointer;
   background: #254F7F;

styles/layouts/ResumoOperacao/ResumoOperacaoView.ts

@@ -139,9 +139,25 @@ export const TableView = styled.div`
 
     color: #254F7F;
     }
-  p{
+
-    margin-top: 4rem;
+    .pagination{
+
+    }
+`;
+
+export const Pagination = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+
+  .number{
+    color: #2E5581;
+  }
+  .numberColor{
+    color: #ABAFB3;
+;
   }
 
-
 `;
+

styles/layouts/news/NewsView.ts

@@ -0,0 +1,66 @@
+import styled from "styled-components";
+
+export const NewsView = styled.main`
+  width: 100%;
+
+  p {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 300;
+    font-size: 17px;
+    line-height: 26px;
+  }
+  h2{
+    color: #254F7F;
+  }
+
+  ul {
+    list-style: none;
+
+    li {
+      display: flex;
+      margin-bottom: 8px;
+    }
+  }
+
+  section {
+    article {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+
+      aside {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        width: fit-content;
+
+        flex-direction: column;
+      }
+    }
+
+
+}`;
+
+export const Button = styled.div`
+   display: flex;
+   justify-content: center;
+
+
+   fieldset {
+    border-top: 0.7px solid #E1E1E1;
+    border-bottom: none;
+    border-left: none;
+    border-right: none;
+    display: block;
+    text-align: center;
+    width: 100%;
+  }
+
+  fieldset legend {
+      padding: 25px 4px;
+      color: #ABB3BB;
+      font-size: 14px;
+  }
+`;