🔖 Merge branch 'release/0.1.0' into 'main'

Release/0.1.0 See merge request kluppsoftware/smart-energia-web!35
2022-05-12 14:22:25 +00:00 · 2022-05-12 14:22:25 +00:00 · 583c2f8b12
commit 583c2f8b12
parent 51ae0e433f b93316c3bd
17 changed files with 219 additions and 129 deletions
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@ -11,14 +11,7 @@ import '../styles/nprogress/nprogress.css'
 import '../styles/globals.ts'

 import Home from '.'
-
-<<<<<<< HEAD
-
-function MyApp({ Component, pageProps }: AppProps) {
-  const [ auth, setAuth ] = useState(false)
-=======
 import Head from 'next/head'
->>>>>>> d76992f98de0130492c71a92530d12b04793ecac

 function MyApp({ Component, pageProps }: AppProps) {
  const router = useRouter()
@ -64,4 +57,4 @@ function MyApp({ Component, pageProps }: AppProps) {
  )
 }

-export default MyApp
+export default MyApp;
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@ -41,16 +41,7 @@ export default class MyDocument extends Document {
            <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin='true' />

            <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"/>
-<<<<<<< HEAD
-            <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet" />
            <link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400&family=Lobster&family=Poppins:ital,wght@0,500;0,600;0,800;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet" />
-=======
-
-
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400&family=Lobster&family=Poppins:ital,wght@0,500;0,600;0,800;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet" />
-
-
->>>>>>> d76992f98de0130492c71a92530d12b04793ecac
          </Head>
          <body>
            <Main />
--- a/pages/index.tsx
+++ b/pages/index.tsx
@ -13,18 +13,16 @@ import TextField from '@mui/material/TextField';

 import {AiOutlineEyeInvisible, AiOutlineEye} from 'react-icons/ai';

-import { LoginView, LoginContainer} from  '../styles/layouts/Login/LoginView';
+import { LoginView, LoginContainer } from  '../styles/layouts/login/LoginView';

 export default function Home() {
  const [state, setstate]=useState(false);
+
  const toggleBtn = ()=> {
    setstate(prevState => !prevState);
  }
  const [values, setValues] = React.useState({
-    amount: '',
    password: '',
-    weight: '',
-    weightRange: '',
    showPassword: false,
  });

@ -78,9 +76,7 @@ export default function Home() {
        </FormControl>
        <span>Esqueceu a senha ?</span>

-        <Link href='/dashboard' >
          <LoginButton title='ENTRAR' />
-        </Link>

        <fieldset className="line">
          <legend className="text">Ou</legend>
--- a/pages/news.tsx
+++ b/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>
+  )
+}
--- a/pages/resumoOperacao.tsx
+++ b/pages/resumoOperacao.tsx
@ -1,13 +1,10 @@
 import React from 'react';
-<<<<<<< HEAD
-import BasicButton from '../src/components/buttons/basicButton/BasicButton';
-=======
 import Header from '../src/components/header/Header';
 import PageTitle from '../src/components/pageTitle/PageTitle';
->>>>>>> d76992f98de0130492c71a92530d12b04793ecac
+import BasicButton from '../src/components/buttons/basicButton/BasicButton';
 import Sidebar from '../src/components/sidebar/Sidebar';

-import { TableView } from '../styles/layouts/ResumoOperacao/ResumoOperacaoView';
+import { Pagination, TableView } from '../styles/layouts/ResumoOperacao/ResumoOperacaoView';

 export default function ResumoOperacao() {
  return(
@ -17,76 +14,6 @@ export default function ResumoOperacao() {

      <h3>Seletor Mês</h3>
      <table className="tg">
-<<<<<<< HEAD
-<thead>
-  <tr>
-    <th className='tg-8oo6'>Unidade </th>
-    <th className='tg-8oo6'>Operação</th>
-    <th className='tg-8oo6'>Montante (MWh)</th>
-    <th className='tg-8oo6'>Contraparte</th>
-    <th className='tg-8oo6'>Preço(R$/MWh)</th>
-    <th className='tg-8oo6'>ValorNF/Crédito(R$)</th>
-  </tr>
-</thead>
-<tbody>
-  <tr>
-    <td className='tg-gceh'>Unidade - 9500130</td>
-    <td className='tg-uulg'>Compra</td>
-    <td className='tg-gceh'>122,269</td>
-    <td className='tg-gceh'>COPEL COM I5</td>
-    <td className='tg-uulg'>234,67</td>
-    <td className='tg-gceh'>38.257,15</td>
-  </tr>
-  <tr>
-    <td className='tg-hq65'>Unidade - 9500130</td>
-    <td className='tg-0tzy'>Compra</td>
-    <td className='tg-hq65'>110,348</td>
-    <td className='tg-hq65'>EMEWE I5</td>
-    <td className='tg-0tzy'>190,16</td>
-    <td className='tg-hq65'>27.978,37</td>
-  </tr>
-  <tr>
-    <td className="tg-gceh">Unidade - 9500130</td>
-    <td className="tg-uulg">Compra</td>
-    <td className="tg-gceh">13,074</td>
-    <td className="tg-gceh">PACTO COMERCIALIZADORA I5</td>
-    <td className="tg-gceh">300,36</td>
-    <td className="tg-gceh">5.235,88</td>
-  </tr>
-  <tr>
-    <td className='tg-hq65'>Unidade - 9500130</td>
-    <td className='tg-0tzy'>Compra</td>
-    <td className='tg-hq65'>133,117</td>
-    <td className='tg-hq65'>COPEL COM I5</td>
-    <td className='tg-0tzy'>300,36</td>
-    <td className='tg-hq65'>41.651,42</td>
-  </tr>
-  <tr>
-    <td className='tg-gceh'>Unidade - 9500130</td>
-    <td className='tg-uulg'>Compra</td>
-    <td className='tg-gceh'>120,138</td>
-    <td className='tg-gceh'>EMEWE I5</td>
-    <td className='tg-uulg'>234,67</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>
-
-<BasicButton title='Enviar PDF' />
-<p>Mostando de 1 a 10 de 30 Entradas</p>
-
-    </TableView>
-
-
-=======
        <thead>
          <tr>
            <th className='tg-8oo6'>Unidade </th>
@ -148,7 +75,15 @@ export default function ResumoOperacao() {
          </tr>
        </tbody>
      </table>
+      <BasicButton title='Baixar PDF' />
+
+      <Pagination>
+      <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>
->>>>>>> d76992f98de0130492c71a92530d12b04793ecac
+
+
  )
 }
--- a/pages/telemetria.tsx
+++ b/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
--- a/public/assets/banners/news.png
+++ b/public/assets/banners/news.png
--- a/src/components/banner/BannerView.ts
+++ b/src/components/banner/BannerView.ts
@ -45,8 +45,4 @@ export const BannerView = styled.div`
  @media (max-width: 1008px) {
    font-size: 170%;
  }
-
-
-
-
 `
--- a/src/components/buttonGroup/ButtonGroup.tsx
+++ b/src/components/buttonGroup/ButtonGroup.tsx
@ -0,0 +1,39 @@
+import React from 'react'
+
+import ToggleButton from '@mui/material/ToggleButton';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import { ButtonGroupView } from './ButtonGroupView';
+
+export default function ButtonGroup() {
+  const [timeCourse, setTimeCourse] = React.useState<string | null>('Mensal');
+
+  const handleAlignment = (
+    event: React.MouseEvent<HTMLElement>,
+    newTimeCourse: string | null,
+  ) => {
+    setTimeCourse(newTimeCourse);
+  };
+  return (
+    <ButtonGroupView timeCourse={timeCourse} >
+      <ToggleButtonGroup
+        value={timeCourse}
+        exclusive
+        onChange={handleAlignment}
+        aria-label="time course"
+        className='groupButton'
+        style={{backgroundColor: 'transparent'}}
+      >
+        <div className='switch' />
+        <ToggleButton value="Mensal" aria-label="Mensal" style={{backgroundColor: 'transparent', minWidth: '90px', border: 'none'}}>
+          Mensal
+        </ToggleButton>
+        <ToggleButton value="Semanal" aria-label="Semanal" style={{backgroundColor: 'transparent', minWidth: '90px', border: 'none'}}>
+          Semanal
+        </ToggleButton>
+        <ToggleButton value="Hoje" aria-label="Hoje" style={{backgroundColor: 'transparent', minWidth: '90px', border: 'none'}}>
+          Hoje
+        </ToggleButton>
+      </ToggleButtonGroup>
+    </ButtonGroupView>
+  )
+}
--- a/src/components/buttonGroup/ButtonGroupView.ts
+++ b/src/components/buttonGroup/ButtonGroupView.ts
@ -0,0 +1,26 @@
+import { ButtonBaseClassKey } from "@mui/material";
+import styled from "styled-components";
+
+interface ButtonGroupViewInterface {
+  timeCourse: string | any;
+}
+
+export const ButtonGroupView = styled.div<ButtonGroupViewInterface>`
+  background-color: #F4F5F9;
+  border-radius: 10px;
+  .switch {
+    position: absolute;
+
+    width: 85px;
+    height: 40px;
+
+    margin-top: 3.5px;
+    transform: translateX(${props => props.timeCourse=='Mensal'? '4px' : props.timeCourse=='Semanal'? '94px' : '181px'});
+    transition-duration: 0.5s;
+    transition-delay: 0s;
+
+    border-radius: 8px;
+
+    background: #fff;
+  }
+`
--- a/src/components/buttons/basicButton/BasicButtonView.ts
+++ b/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;
--- a/src/components/buttons/loginButton/LoginButton.tsx
+++ b/src/components/buttons/loginButton/LoginButton.tsx
@ -1,3 +1,4 @@
+import Link from 'next/link'
 import React from 'react'
 import { LoginButtonView } from './LoginButtonView'

@ -7,8 +8,10 @@ interface LoginButtonInterface {

 export default function LoginButton({ title }: LoginButtonInterface) {
  return (
+    <Link href='/dashboard' >
      <LoginButtonView>
          {title}
      </LoginButtonView>
+    </Link>
  )
 }
--- a/src/components/graph/graphCard/ChartCard.tsx
+++ b/src/components/graph/graphCard/ChartCard.tsx
@ -6,6 +6,7 @@ import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';

 import { ChartCardView } from './ChartCardView';
 import Chart from '../Chart';
+import ButtonGroup from '../../buttonGroup/ButtonGroup';

 interface ChartCardInterface {
  title: string,
@ -32,23 +33,7 @@ export default function ChartCard({ title, subtitle, consumption, className }: C
            <h2>{title}</h2>
            <span>{subtitle}</span>
          </div>
-          <ToggleButtonGroup
-            value={timeCourse}
-            exclusive
-            onChange={handleAlignment}
-            aria-label="text alignment"
-            className='groupButton'
-          >
-            <ToggleButton value="left" aria-label="left aligned">
-              Mensal
-            </ToggleButton>
-            <ToggleButton value="center" aria-label="centered">
-              Semanal
-            </ToggleButton>
-            <ToggleButton value="right" aria-label="right aligned">
-              Hoje
-            </ToggleButton>
-          </ToggleButtonGroup>
+          <ButtonGroup />
        </div>
        {
          consumption?
--- a/src/components/sidebar/Sidebar.tsx
+++ b/src/components/sidebar/Sidebar.tsx
@ -35,7 +35,7 @@ export default function Sidebar() {
        <Link href='/estimatedCost'><li>Custo Estimado</li></Link>
        <Link href='/costIndicator'><li>Custo R/MWh</li></Link>
        </div>
-        <Link href='#'><li className={router.pathname=='/news'? 'actualPath' : null}><Image src='/assets/sidebar/newsIcon.svg' width={25} height={25} />{'Notícias >'}</li></Link>
+        <Link href='/news'><li className={router.pathname=='/news'? 'actualPath' : null}><Image src='/assets/sidebar/newsIcon.svg' width={25} height={25} />{'Notícias >'}</li></Link>
        <Link href='#'><li className={router.pathname=='/sectorialInfo'? 'actualPath' : null}><Image src='/assets/sidebar/sectorialInfoIcon.svg' width={25} height={25} />{'Info Setorial >'}</li></Link>
        <Link href='/faq'><li className={router.pathname=='/faq'? 'actualPath' : null}><Image src='/assets/sidebar/saqIcon.svg' width={25} height={25} />{'FAQ >'}</li></Link>
        <Link href='/aboutUs'><li className={router.pathname=='/aboutUs'? 'actualPath' : null}><Image src='/assets/sidebar/dashboardIcon.svg' width={25} height={25} />{'Sobre Nós >'}</li></Link>
--- a/src/txt.txt
+++ b/src/txt.txt
--- a/styles/layouts/ResumoOperacao/ResumoOperacaoView.ts
+++ b/styles/layouts/ResumoOperacao/ResumoOperacaoView.ts
@ -139,9 +139,24 @@ 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;
  }

-
 `;
+
--- a/styles/layouts/news/NewsView.ts
+++ b/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;
+  }
+`;