Merge branch 'release/0.2.0' into 'dev'

Release/0.2.0 See merge request kluppsoftware/smart-energia-web!49
2022-05-16 21:26:46 +00:00 · 2022-05-16 21:26:46 +00:00 · 3112632b2d
commit 3112632b2d
parent ab036e3de4 c71949201d
25 changed files with 2302 additions and 178 deletions
--- a/package.json
+++ b/package.json
@ -17,20 +17,26 @@
    ]
  },
  "dependencies": {
+    "@date-io/date-fns": "^2.14.0",
    "@emotion/react": "^11.9.0",
    "@emotion/styled": "^11.8.1",
    "@material-ui/core": "^4.12.4",
    "@material-ui/icons": "^4.11.3",
    "@mui/material": "^5.6.4",
+    "@mui/x-data-grid": "^5.11.0",
+    "@mui/x-date-pickers": "^5.0.0-alpha.3",
    "@typescript-eslint/eslint-plugin": "^5.22.0",
    "@typescript-eslint/parser": "^5.22.0",
    "chart.js": "^3.7.1",
    "eslint-plugin-react": "^7.29.4",
    "eslit": "^6.0.0",
    "faker": "5.5.3",
+    "install": "^0.13.0",
    "next": "12.1.6",
+    "npm": "^8.10.0",
    "nprogress": "^0.2.0",
    "react": "18.1.0",
+    "react-calendar": "^3.7.0",
    "react-chartjs-2": "^4.1.0",
    "react-dom": "18.1.0",
    "react-icons": "^4.3.1",
--- a/public/assets/logout.svg
+++ b/public/assets/logout.svg
@ -0,0 +1,3 @@
+<svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill="none" stroke="#F00" stroke-width="2" d="M13,9 L13,2 L1,2 L1,22 L13,22 L13,15 M22,12 L5,12 M17,7 L22,12 L17,17"/>
+</svg>
--- a/src/components/buttons/loginButton/LoginButton.tsx
+++ b/src/components/buttons/loginButton/LoginButton.tsx
@ -1,17 +1,29 @@
-import Link from 'next/link'
 import React from 'react'
+import Link from 'next/link'
+import RenderIf from '../../../utils/renderIf'
 import { LoginButtonView } from './LoginButtonView'

 interface LoginButtonInterface {
-  title: string
+  title: string,
+  link?: boolean | undefined,
+  onClick?: () => void
 }

-export default function LoginButton({ title }: LoginButtonInterface) {
+export default function LoginButton({ title, link, onClick }: LoginButtonInterface) {
  return (
-    <Link href='/dashboard' >
-      <LoginButtonView>
-          {title}
-      </LoginButtonView>
-    </Link>
+    <>
+      <RenderIf isTrue={link? true : false}>
+        <Link href='/dashboard' >
+          <LoginButtonView>
+            {title}
+          </LoginButtonView>
+        </Link>
+      </RenderIf>
+      <RenderIf isTrue={link? false : true}>
+          <LoginButtonView onClick={() => onClick()}>
+            {title}
+          </LoginButtonView>
+      </RenderIf>
+    </>
  )
 }
--- a/src/components/mapCard/MapCard.tsx
+++ b/src/components/mapCard/MapCard.tsx
@ -1,6 +1,7 @@
 import React from 'react'
 import Image from 'next/image'
 import { MapCardView } from './MapCardView'
+import Link from 'next/link'

 interface MapCardInterface {
  title: string,
@ -10,25 +11,26 @@ interface MapCardInterface {
 }

 export default function MapCard({ title, subtitle, statistic, imgSource }: MapCardInterface) {
+  const route = title==='R$/MWh'? '/consumption': `pld/${title.slice(0,2).toLocaleLowerCase()}-${title.slice(3,5).toLocaleLowerCase()}`

  return (
-    <MapCardView>
-      <Image src={imgSource} width={110} height={110} />
-      <div>
-        <h4>{title}</h4>
-        <span>{subtitle}</span>
-        <article>
-          {
-            statistic?
-              <>
-                <Image src="/graphLineIcon.svg" width={20} height={20} />
-                <p>{statistic}</p>
-              </>
-              :
-              null
-          }
-        </article>
-      </div>
-    </MapCardView>
+      <MapCardView>
+        <Image src={imgSource} width={110} height={110}/>
+        <div>
+          <h4>{title}</h4>
+          <span>{subtitle}</span>
+          <article>
+            {
+              statistic?
+                <>
+                  <Image src="/graphLineIcon.svg" width={20} height={20} />
+                  <p>{statistic}</p>
+                </>
+                :
+                null
+            }
+          </article>
+        </div>
+      </MapCardView>
  )
 }
--- a/src/components/sidebar/Sidebar.tsx
+++ b/src/components/sidebar/Sidebar.tsx
@ -26,21 +26,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>
-        <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='/resumoOperacao'><li className={router.pathname=='/resumoOperacao'? 'actualPath' : null} ><Image src='/assets/sidebar/summaryOperationsIcon.svg' width={25} height={25} />{'Resumo de Op. '}</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>Economia Bruta</li></Link>
-        <Link href='/accumulatedSavings'><li>Economia Acumulada</li></Link>
-        <Link href='/estimatedCost'><li>Custo Estimado</li></Link>
-        <Link href='/costIndicator'><li>Custo R/MWh</li></Link>
-        </div>
+          <div className='economiaDrawer drawer' >
+          <Link href='/grossSavings'><li>Economia Bruta</li></Link>
+          <Link href='/accumulatedSavings'><li>Economia Acumulada</li></Link>
+          <Link href='/estimatedCost'><li>Custo Estimado</li></Link>
+          <Link href='/costIndicator'><li>Custo R/MWh</li></Link>
+          </div>
+        <Link href='/telemetria'><li className={router.pathname=='/telemetry'? '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='#'><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='/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=='/notification'? 'actualPath' : null}><Image src='/assets/sidebar/notificationsIcon.svg' width={25} height={25} />{'Notificação >'}</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>
-        <Link href='#'><li className={router.pathname=='/notification'? 'actualPath' : null}><Image src='/assets/sidebar/notificationsIcon.svg' width={25} height={25} />{'Notificação >'}</li></Link>
-        <Link href='/telemetria'><li className={router.pathname=='/telemetry'? 'actualPath' : null}><Image src='/assets/sidebar/telemetryIcon.svg' width={25} height={25} />{'Telemetria >'}</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='/'><button><Image src='/assets/logout.svg' width={25} height={25} />{'Sair'}</button></Link>
      </ul>
      <aside>
        <p>Nossos Gerentes estão prontos para atendê-los</p>
--- a/src/components/sidebar/SidebarView.ts
+++ b/src/components/sidebar/SidebarView.ts
@ -122,6 +122,26 @@ export const SidebarView = styled.nav<SidebarViewInterface>`
    display: none;
  }

+  button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    width: 10rem;
+    height: 3rem;
+
+    border-style: none;
+
+    border-radius: 6px;
+
+    font-family: 'Poppins';
+    font-weight: 600;
+    font-size: 99.98%;
+    color: #f00;
+
+    cursor: pointer;
+  }
+
  @media (max-width: 1008px) {
    align-items: flex-start;

--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@ -12,6 +12,8 @@ import '../styles/globals.ts'

 import Home from '.'
 import Head from 'next/head'
+import VerifyEmail from './verifyEmail'
+import ForgotPassword from './forgotPassword'

 function MyApp({ Component, pageProps }: AppProps) {
  const router = useRouter()
@ -43,9 +45,11 @@ function MyApp({ Component, pageProps }: AppProps) {
        <meta name="viewport" content="viewport-fit=cover" />
      </Head>
      <Home />
+      <VerifyEmail />
+      <ForgotPassword />
      <GlobalStyle />
      {
-        rota != '/'?
+        rota != '/' && rota != '/forgotPassword' && rota != '/verifyEmail'?
          <>
            <Sidebar />
            <Component {...pageProps} />
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@ -2,35 +2,37 @@ import React from 'react'

 import { ServerStyleSheet } from 'styled-components';

-import Document, { Html, Head, Main, NextScript } from 'next/document'
+import Document, { DocumentContext, DocumentInitialProps, Html, Head, Main, NextScript } from 'next/document'

 export default class MyDocument extends Document {
-  static async GetInitialProps(ctx) {
-    const sheet = new ServerStyleSheet();
-    const originalRenderPage = ctx.renderPage;
+  static async getInitialProps(
+    ctx: DocumentContext
+  ): Promise<DocumentInitialProps> {
+    const sheet = new ServerStyleSheet()
+    const originalRenderPage = ctx.renderPage

    try {
      ctx.renderPage = () =>
-      originalRenderPage({
-        enhanceApp: App => props => sheet.collectStyles(<App {...props} />)
-      });
+        originalRenderPage({
+          enhanceApp: (App) => (props) =>
+            sheet.collectStyles(<App {...props} />),
+        })

-      const initialProps = await Document.getInitialProps(ctx);
+      const initialProps = await Document.getInitialProps(ctx)
      return {
-      ...initialProps,
-      styles: (
-        <>
-          {initialProps.styles}
-          {sheet.getStyleElement()}
-        </>
-      )
-      };
-      } finally {
-        sheet.seal();
+        ...initialProps,
+        styles: [
+          <>
+            {initialProps.styles}
+            {sheet.getStyleElement()}
+          </>,
+        ],
      }
+    } finally {
+      sheet.seal()
+    }
  }

-
    render() {
      return (
        <Html>
@ -43,6 +45,11 @@ export default class MyDocument extends Document {

            <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"/>
            <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 rel="preconnect" href="https://fonts.googleapis.com"/>
+            <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin='true' />
+            <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"/>
+
          </Head>
          <body>
            <Main />
--- a/src/pages/dashboard.tsx
+++ b/src/pages/dashboard.tsx
@ -6,19 +6,22 @@ import MapCard from '../components/mapCard/MapCard'
 import GraphCard from '../components/graph/graphCard/ChartCard'
 import Header from '../components/header/Header'
 import PageTitle from '../components/pageTitle/PageTitle'
+import Link from 'next/link'

 export default function Dashboard() {
  return (
    <DashboardView>
      <Header name='' />
      <PageTitle title='Visão Geral' subtitle='Bem Vindo a Smart Energia' />
-      <section className="cardsSection" >
-        <MapCard title='R$/MWh' subtitle='abril / 22' statistic='' imgSource='/moneyIcon.svg' />
-        <MapCard title='SE/CO' subtitle='Sudeste' statistic='R$ 273,54' imgSource='/mapSample.svg' />
-        <MapCard title='SE/CO' subtitle='Sudeste' statistic='R$ 273,54' imgSource='/mapSample.svg' />
-        <MapCard title='SE/CO' subtitle='Sudeste' statistic='R$ 273,54' imgSource='/mapSample.svg' />
-        <MapCard title='SE/CO' subtitle='Sudeste' statistic='R$ 273,54' imgSource='/mapSample.svg' />
-      </section>
+      <Link href={'pld'} >
+        <section className="cardsSection" >
+            <MapCard title='R$/MWh' subtitle='abril / 22' statistic='' imgSource='/moneyIcon.svg' />
+            <MapCard title='SE/CO' subtitle='Sudeste' statistic='R$ 273,54' imgSource='/mapSample.svg' />
+            <MapCard title='SE/CO' subtitle='Sudeste' statistic='R$ 273,54' imgSource='/mapSample.svg' />
+            <MapCard title='SE/CO' subtitle='Sudeste' statistic='R$ 273,54' imgSource='/mapSample.svg' />
+            <MapCard title='SE/CO' subtitle='Sudeste' statistic='R$ 273,54' imgSource='/mapSample.svg' />
+        </section>
+      </Link>

      <section className='dashboard'>
        <GraphCard title='Consumo' subtitle='Gráfico de Consumo' consumption={25} />
--- a/src/pages/forgotPassword.tsx
+++ b/src/pages/forgotPassword.tsx
@ -0,0 +1,42 @@
+import React, { useState, useEffect } from 'react'
+import Image from 'next/image';
+import { useRouter } from 'next/router'
+
+import LoginButton from '../components/buttons/loginButton/LoginButton';
+import TextField from '@mui/material/TextField';
+import { ForgotPasswordContainer, ForgotPasswordView } from '../styles/layouts/forgotPassword/ForgotPasswordView';
+
+export default function ForgotPassword() {
+  const router = useRouter()
+  const rota = router.pathname
+
+  const [password, setPassword] = useState<string>('')
+  const [confirmPassword, setConfirmPassword] = useState<string>('')
+
+  useEffect(() => {
+    setPassword('')
+    setConfirmPassword('')
+  }, [rota])
+
+  return (
+    <ForgotPasswordView auth={rota} >
+    <Image src='/assets/marca1.svg' width={500} height={500} />
+    <ForgotPasswordContainer>
+      <h1>Bem-Vindo</h1>
+      <h2>Estratégias Inteligentes em<br /> Gestão de Energia</h2>
+
+      <TextField id="outlined-basic" sx={{ m: 1, width: '90%' }} value={password} label="Senha" onChange={value => setPassword(value.target.value)} variant="outlined"/>
+      <TextField id="outlined-basic" sx={{ m: 1, width: '90%' }} value={confirmPassword} label="Confirmar Senha" onChange={value => setConfirmPassword(value.target.value)} variant="outlined"/>
+
+      <LoginButton title='Redefinir Senha' onClick={() => router.push('/')} />
+
+      <fieldset className="line">
+        <legend className="text">Ou</legend>
+      </fieldset>
+
+      <p><a href='tel:+55(41) 3012-5900' >+55(41) 3012-5900</a><br/><a href='https://www.energiasmart.com.br' >www.energiasmart.com.br</a></p>
+
+    </ForgotPasswordContainer>
+  </ForgotPasswordView>
+  )
+}
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@ -18,9 +18,6 @@ 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({
    password: '',
    showPassword: false,
@ -74,19 +71,17 @@ export default function Home() {
            label="Password"
          />
        </FormControl>
-        <span>Esqueceu a senha ?</span>
+        <Link href='verifyEmail' >Esqueceu a senha ?</Link>

-          <LoginButton title='ENTRAR' />
+        <LoginButton title='ENTRAR' link />

        <fieldset className="line">
          <legend className="text">Ou</legend>
        </fieldset>

-        <p>+55(41) 3012-5900<br/>www.energiasmart.com.br</p>
+        <p><a href='tel:+55(41) 3012-5900' >+55(41) 3012-5900</a><br/><a href='https://www.energiasmart.com.br' >www.energiasmart.com.br</a></p>

      </LoginContainer>
    </LoginView>
  )
 }
-
-
--- a/src/pages/notifications.tsx
+++ b/src/pages/notifications.tsx
@ -0,0 +1,27 @@
+import React from 'react'
+import CommonQuestionsCard from '../components/faqQuestionsCard/FaqQuestionsCard'
+import Header from '../components/header/Header'
+import PageTitle from '../components/pageTitle/PageTitle'
+import { FaqView } from '../styles/layouts/commonQuestions/FaqView'
+
+export default function Notifications() {
+  return (
+    <FaqView>
+      <Header name='' />
+      <PageTitle title='Notifications' subtitle='' />
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+      <section className='CommonQuestionsSection' >
+        <CommonQuestionsCard />
+        <hr />
+        <CommonQuestionsCard />
+        <hr />
+        <CommonQuestionsCard />
+        <hr />
+        <CommonQuestionsCard />
+        <hr />
+        <CommonQuestionsCard />
+        <hr />
+      </section>
+    </FaqView>
+  )
+}
--- a/src/pages/pld/index.tsx
+++ b/src/pages/pld/index.tsx
@ -0,0 +1,217 @@
+import React, { useEffect, useState } from 'react'
+import Image from 'next/Image'
+import { useRouter } from 'next/router'
+
+import Header from '../../components/header/Header'
+import MenuItem from '@mui/material/MenuItem';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+
+import { GoBack, PldGraphView, PldTableView } from '../../styles/layouts/pld/PldView'
+
+import RenderIf from '../../utils/renderIf'
+import BasicButton from '../../components/buttons/basicButton/BasicButton';
+import Chart from '../../components/graph/Chart';
+import PageTitle from '../../components/pageTitle/PageTitle';
+import Link from 'next/link';
+
+export default function region() {
+  const router = useRouter()
+  const { region } = router.query
+
+  const [page, setPage] = useState<string>('table')
+  const [age, setAge] = React.useState('');
+
+  const handleChange = (event: SelectChangeEvent) => {
+    setAge(event.target.value);
+  };
+
+  useEffect(() => {
+    console.log(page)
+  }, [page])
+
+  return (
+    <main style={{
+      width: '100%',
+    }}>
+      <Header name='' />
+      <RenderIf isTrue={page==='table'? true : false}>
+        <Link href='/dashboard' >{'< voltar para visão geral'}</Link>
+        <PageTitle title='Tabela de consumo Pld' subtitle=''/>
+        <PldTableView>
+          <table className="tg">
+            <thead>
+              <tr>
+                <th className='tg-8oo6'>Mês</th>
+                <th className='tg-8oo6'>Nordeste</th>
+                <th className='tg-8oo6'>Norte</th>
+                <th className='tg-8oo6'>Sudeste</th>
+                <th className='tg-8oo6'>Sul</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td className='tg-gceh'>2101</td>
+                <td className='tg-uulg'>xxxx</td>
+                <td className='tg-gceh'>xxxx</td>
+                <td className='tg-gceh'>xxxx</td>
+                <td className='tg-uulg'>xxxx</td>
+              </tr>
+              <tr>
+                <td className='tg-hq65'>2102</td>
+                <td className='tg-0tzy'>xxxx</td>
+                <td className='tg-hq65'>xxxx</td>
+                <td className='tg-hq65'>xxxx</td>
+                <td className='tg-0tzy'>xxxx</td>
+              </tr>
+              <tr>
+                <td className="tg-gceh">2103</td>
+                <td className="tg-uulg">xxxx</td>
+                <td className="tg-gceh">xxxx</td>
+                <td className="tg-gceh">xxxx</td>
+                <td className="tg-gceh">xxxx</td>
+              </tr>
+              <tr>
+                <td className='tg-hq65'>2104</td>
+                <td className='tg-0tzy'>xxxx</td>
+                <td className='tg-hq65'>xxxx</td>
+                <td className='tg-hq65'>xxxx</td>
+                <td className='tg-0tzy'>xxxx</td>
+              </tr>
+              <tr>
+                <td className='tg-gceh'>2105</td>
+                <td className='tg-uulg'>xxxx</td>
+                <td className='tg-gceh'>xxxx</td>
+                <td className='tg-gceh'>xxxx</td>
+                <td className='tg-uulg'>xxxx</td>
+              </tr>
+              <tr>
+                <td className='tg-hq65'>2106</td>
+                <td className='tg-0tzy'>xxxx</td>
+                <td className='tg-hq65'>xxxx</td>
+                <td className='tg-hq65'>xxxx</td>
+                <td className='tg-0tzy'>xxxx</td>
+              </tr>
+              <tr>
+                <td className='tg-gceh'>2107</td>
+                <td className='tg-uulg'>xxxx</td>
+                <td className='tg-gceh'>xxxx</td>
+                <td className='tg-gceh'>xxxx</td>
+                <td className='tg-uulg'>xxxx</td>
+              </tr>
+              <tr>
+                <td className='tg-hq65'>2108</td>
+                <td className='tg-0tzy'>xxxx</td>
+                <td className='tg-hq65'>xxxx</td>
+                <td className='tg-hq65'>xxxx</td>
+                <td className='tg-0tzy'>xxxx</td>
+              </tr>
+              <tr>
+                <td className='tg-gceh'>2109</td>
+                <td className='tg-uulg'>xxxx</td>
+                <td className='tg-gceh'>xxxx</td>
+                <td className='tg-gceh'>xxxx</td>
+                <td className='tg-uulg'>xxxx</td>
+              </tr>
+              <tr>
+                <td className='tg-hq65'>2110</td>
+                <td className='tg-0tzy'>xxxx</td>
+                <td className='tg-hq65'>xxxx</td>
+                <td className='tg-hq65'>xxxx</td>
+                <td className='tg-0tzy'>xxxx</td>
+              </tr>
+              <tr>
+                <td className='tg-gceh'>2111</td>
+                <td className='tg-uulg'>xxxx</td>
+                <td className='tg-gceh'>xxxx</td>
+                <td className='tg-gceh'>xxxx</td>
+                <td className='tg-uulg'>xxxx</td>
+              </tr>
+              <tr>
+                <td className='tg-hq65'>2112</td>
+                <td className='tg-0tzy'>xxxx</td>
+                <td className='tg-hq65'>xxxx</td>
+                <td className='tg-hq65'>xxxx</td>
+                <td className='tg-0tzy'>xxxx</td>
+              </tr>
+              <tr>
+                <td className='tg-gceh'>2021</td>
+                <td className='tg-uulg'>xxxx</td>
+                <td className='tg-gceh'>xxxx</td>
+                <td className='tg-gceh'>xxxx</td>
+                <td className='tg-uulg'>xxxx</td>
+              </tr>
+              <tr>
+                <td className='tg-gceh'>Mín</td>
+                <td className='tg-uulg'>xxxx</td>
+                <td className='tg-gceh'>xxxx</td>
+                <td className='tg-gceh'>xxxx</td>
+                <td className='tg-uulg'>xxxx</td>
+              </tr>
+              <tr>
+                <td className='tg-gceh'>Max</td>
+                <td className='tg-uulg'>xxxx</td>
+                <td className='tg-gceh'>xxxx</td>
+                <td className='tg-gceh'>xxxx</td>
+                <td className='tg-uulg'>xxxx</td>
+              </tr>
+              <tr>
+                <td className='tg-gceh'>Desv Pad</td>
+                <td className='tg-uulg'>xxxx</td>
+                <td className='tg-gceh'>xxxx</td>
+                <td className='tg-gceh'>xxxx</td>
+                <td className='tg-uulg'>xxxx</td>
+              </tr>
+            </tbody>
+          </table>
+          <section>
+            <article onClick={() => setPage('perMouth')}>
+              <p>Valores Diarios: R$100,00</p>
+            </article>
+            <article onClick={() => setPage('perDate')}>
+              <p>Valores Horários: R$100,00</p>
+            </article>
+          </section>
+        </PldTableView>
+      </RenderIf>
+
+      <RenderIf isTrue={page==='perMouth'? true : false}>
+        <GoBack onClick={() => setPage('table')}>{'< voltar para tabela pld'}</GoBack>
+        <PageTitle title='Consumo por mês' subtitle=''/>
+        <PldGraphView>
+          <section className='toolsbar'>
+            <div className='select'>
+              <Select
+                value={age}
+                onChange={handleChange}
+                displayEmpty
+                sx={{
+                  width: '100%'
+                }}
+              >
+                <MenuItem value={0}>Filial 3</MenuItem>
+                <MenuItem value={10}>Filial 3</MenuItem>
+                <MenuItem value={20}>Twenty</MenuItem>
+                <MenuItem value={30}>Thirty</MenuItem>
+              </Select>
+            </div>
+            <input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09"/>
+            <BasicButton title='Download (csv)' />
+          </section>
+          <Chart title='' />
+        </PldGraphView>
+      </RenderIf>
+
+      <RenderIf isTrue={page==='perDate'? true : false}>
+        <GoBack onClick={() => setPage('table')}>{'< voltar para tabela pld'}</GoBack>
+        <PldGraphView>
+          <PageTitle title='Consumo por dia' subtitle=''/>
+          <section className='toolsbar'>
+            <input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09"/>
+            <BasicButton title='Download (csv)' />
+          </section>
+          <Chart title='' />
+        </PldGraphView>
+      </RenderIf>
+    </main>
+  )
+}
--- a/src/pages/verifyEmail.tsx
+++ b/src/pages/verifyEmail.tsx
@ -0,0 +1,75 @@
+import React, { useEffect, useState } from 'react'
+import Image from 'next/image';
+import { useRouter } from 'next/router'
+
+import LoginButton from '../components/buttons/loginButton/LoginButton';
+import TextField from '@mui/material/TextField';
+
+import Alert from '@mui/material/Alert';
+
+import { VerifyEmailContainer, VerifyEmailView } from '../styles/layouts/forgotPassword/verifyEmail';
+import RenderIf from '../utils/renderIf';
+
+export default function VerifyEmail() {
+  const [sent, setSent]=useState(false);
+  const [code, setCode]=useState<string>('')
+  const [codeStatus, setCodeStatus]=useState<boolean>(null)
+
+  const [values, setValues] = React.useState({
+    password: '',
+    showPassword: false,
+  });
+
+  const router = useRouter()
+  const rota = router.pathname
+
+  useEffect(() => {
+    setCode('')
+    setSent(false)
+    setCodeStatus(null)
+  }, [rota])
+
+  function verifyConfirmationCode() {
+    if (code === '0000') {
+      setTimeout(() => {
+        router.push('/')
+      }, 2500);
+      setCodeStatus(true)
+    } else {
+      setCodeStatus(false)
+    }
+  }
+
+  return (
+    <VerifyEmailView auth={rota} >
+      <Image src='/assets/marca1.svg' width={500} height={500} />
+      <VerifyEmailContainer>
+        <h1>Bem-Vindo</h1>
+        <h2>Estratégias Inteligentes em<br /> Gestão de Energia</h2>
+
+        <TextField id="outlined-basic" sx={{ m: 1, width: '90%' }}label="Email" variant="outlined"/>
+        <RenderIf isTrue={sent? false : true}>
+          <LoginButton title='Enviar Email' onClick={() => setSent(true)} />
+        </RenderIf>
+
+        <RenderIf isTrue={sent? true : false}>
+          <TextField id="outlined-basic" sx={{ m: 1, width: '90%' }}label="Codigo de verificação" variant="outlined" onChange={value => setCode(value.target.value)} />
+          <LoginButton title='Continuar' onClick={() => {verifyConfirmationCode()}} />
+          <RenderIf isTrue={codeStatus===true? true : false} >
+            <Alert severity="success">Codigo de veerificação aceito — aguarde um instante!</Alert>
+          </RenderIf>
+          <RenderIf isTrue={codeStatus===false? true : false} >
+            <Alert severity="warning">Codigo de verificação invalido — tente outro!</Alert>
+          </RenderIf>
+        </RenderIf>
+
+        <fieldset className="line">
+          <legend className="text">Ou</legend>
+        </fieldset>
+
+        <p><a href='tel:+55(41) 3012-5900' >+55(41) 3012-5900</a><br/><a href='https://www.energiasmart.com.br' >www.energiasmart.com.br</a></p>
+
+      </VerifyEmailContainer>
+    </VerifyEmailView>
+  )
+}
--- a/src/styles/app/AppView.ts
+++ b/src/styles/app/AppView.ts
@ -3,6 +3,8 @@ import styled from 'styled-components'
 export const AppView = styled.main`
  display: flex;

+  height: 100%;
+
  margin: 0 0 10rem 0;
  padding: 0;

--- a/src/styles/globals.ts
+++ b/src/styles/globals.ts
@ -5,6 +5,7 @@ export const GlobalStyle = createGlobalStyle`
    margin: 0;
    padding: 0;
    font-family: 'Poppins';
+    background-color: #f9f9f9;
  }

  main {
--- a/src/styles/layouts/ResumoOperacao/ResumoOperacaoView.ts
+++ b/src/styles/layouts/ResumoOperacao/ResumoOperacaoView.ts
@ -2,79 +2,79 @@ import styled from 'styled-components'


 export const TableView = styled.div`
-    display: flex;
-    padding: 2.5rem;
-    justify-content: center;
-    flex-direction: column;
-    align-items: flex-start;
-    width: 100%;
-    height: 100%;
-
-
-.tg{
-  border-collapse:collapse;
-  border-spacing:0;
-  font-family:Poppins;
+  display: flex;
+  padding: 2.5rem;
+  justify-content: center;
+  flex-direction: column;
+  align-items: flex-start;
  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;
-}
+  height: 100%;


-.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
-}
+  .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
+  }

  .tg .tg-baqh{
    text-align:center;
@ -96,11 +96,7 @@ export const TableView = styled.div`
    line-height: 54px;

    color: #254F7F;
-    }
-
-    .pagination{
-
-    }
+  }
 `;

 export const Pagination = styled.div`
--- a/src/styles/layouts/dashboard/DashboardView.js
+++ b/src/styles/layouts/dashboard/DashboardView.js
@ -18,13 +18,17 @@ export const DashboardView = styled.main`

    flex-wrap: wrap;

-    box-shadow: 0px 0px 15px -3px rgba(0,0,0,0.1);
-    border-radius: 10px;
-
    width: 100%;
    height: fit-content;

    margin: 2rem 0 2rem 0;
+
+    background-color: #fff;
+
+    box-shadow: 0px 0px 15px -3px rgba(0,0,0,0.1);
+    border-radius: 10px;
+
+    cursor: pointer;
  }

  .dashboard {
--- a/src/styles/layouts/dashboard/DashboardView.ts
+++ b/src/styles/layouts/dashboard/DashboardView.ts
@ -0,0 +1,78 @@
+import styled from 'styled-components'
+
+export const DashboardView = styled.main`
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+
+  flex-wrap: wrap;
+
+  flex-direction: column;
+
+  width: 100%;
+
+  .cardsSection {
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+
+    flex-wrap: wrap;
+
+    width: 100%;
+    height: fit-content;
+
+    margin: 2rem 0 2rem 0;
+
+    background-color: #fff;
+
+    box-shadow: 0px 0px 15px -3px rgba(0,0,0,0.1);
+    border-radius: 10px;
+
+    cursor: pointer;
+  }
+
+  .dashboard {
+    display: grid;
+
+    grid-template-columns: 50% 50% 100%;
+    grid-template-rows: 50% 50%;
+
+    gap: 30px;
+
+    width: 99%;
+
+    padding-right: 20px;
+
+    .footerGraph {
+      grid-row-start: 2;
+
+      grid-column-start: 1;
+      grid-column-end: 3;
+    }
+  }
+
+  @media (max-width: 1195px) {
+    width: 100%;
+    padding: 30px;
+    margin: 0;
+
+    .dashboard {
+      display: flex;
+
+      padding: 0;
+      margin: 0;
+
+      justify-content: center;
+      align-items: center;
+
+      flex-wrap: wrap;
+
+      grid-template-columns: 50% 50%;
+
+      grid-auto-rows: 1;
+      grid-auto-columns: 1;
+
+      width: 100%;
+    }
+  }
+`
--- a/src/styles/layouts/forgotPassword/ForgotPasswordView.ts
+++ b/src/styles/layouts/forgotPassword/ForgotPasswordView.ts
@ -0,0 +1,101 @@
+
+import styled from 'styled-components';
+
+export const ForgotPasswordView = styled.main<{auth: string}>`
+  display: flex;
+  display: ${props => props.auth == '/forgotPassword'? null : 'none'};
+  justify-content: flex-end;
+  align-items: center;
+
+  width: 100%;
+  height: 100vh;
+
+  padding: 0;
+  margin: 0;
+
+  @media (max-width: 1196px) {
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+
+    height: 100%;
+
+    padding: 100px;
+  }
+`;
+
+export const ForgotPasswordContainer = styled.section`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  flex-direction: column;
+
+  width: 40%;
+  margin-left: 60px;
+
+  border-radius: 10px;
+
+  background-color: #FFF;
+
+  h1{
+    margin-bottom:5px;
+    color: #092C4C;
+  }
+
+  h2{
+    font-weight: 5;
+    font-size: 21px;
+    margin-bottom: 3rem;
+    color: #092C4C;
+    font-weight: 300;
+    text-align: center;
+  }
+
+  .line {
+    border-top: 0.7px solid #E1E1E1;
+    border-bottom: none;
+    border-left: none;
+    border-right: none;
+    display: block;
+    text-align: center;
+    width: 90%;
+  }
+
+  .line .text {
+    padding: 19px 56px;
+    color: #ABB3BB;
+    font-size: 14px;
+  }
+
+  span{
+    display: flex;
+    align-self: flex-end;
+    margin-right: 5%;
+    justify-content: flex-end;
+    cursor: pointer;
+  }
+  a {
+    :nth-child(5) {
+      align-self: flex-end;
+      margin-right: 5%;
+      margin-bottom: 40px;
+      color: #5d83fc;
+    }
+  }
+
+  p{
+    color: #8B8B8B;
+    text-align: center;
+    margin-top: 1px;
+  }
+
+  @media (max-width: 1196px) {
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    width: 100%;
+    margin: 0;
+  }
+`;
--- a/src/styles/layouts/forgotPassword/verifyEmail.ts
+++ b/src/styles/layouts/forgotPassword/verifyEmail.ts
@ -0,0 +1,101 @@
+
+import styled from 'styled-components';
+
+export const VerifyEmailView = styled.main<{auth: string}>`
+  display: flex;
+  display: ${props => props.auth == '/verifyEmail'? null : 'none'};
+  justify-content: flex-end;
+  align-items: center;
+
+  width: 100%;
+  height: 100vh;
+
+  padding: 0;
+  margin: 0;
+
+  @media (max-width: 1196px) {
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+
+    height: 100%;
+
+    padding: 100px;
+  }
+`;
+
+export const VerifyEmailContainer = styled.section`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  flex-direction: column;
+
+  width: 40%;
+  margin-left: 60px;
+
+  border-radius: 10px;
+
+  background-color: #FFF;
+
+  h1{
+    margin-bottom:5px;
+    color: #092C4C;
+  }
+
+  h2{
+    font-weight: 5;
+    font-size: 21px;
+    margin-bottom: 3rem;
+    color: #092C4C;
+    font-weight: 300;
+    text-align: center;
+  }
+
+  .line {
+    border-top: 0.7px solid #E1E1E1;
+    border-bottom: none;
+    border-left: none;
+    border-right: none;
+    display: block;
+    text-align: center;
+    width: 90%;
+  }
+
+  .line .text {
+    padding: 19px 56px;
+    color: #ABB3BB;
+    font-size: 14px;
+  }
+
+  span{
+    display: flex;
+    align-self: flex-end;
+    margin-right: 5%;
+    justify-content: flex-end;
+    cursor: pointer;
+  }
+  a {
+    :nth-child(5) {
+      align-self: flex-end;
+      margin-right: 5%;
+      margin-bottom: 40px;
+      color: #5d83fc;
+    }
+  }
+
+  p{
+    color: #8B8B8B;
+    text-align: center;
+    margin-top: 1px;
+  }
+
+  @media (max-width: 1196px) {
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    width: 100%;
+    margin: 0;
+  }
+`;
--- a/src/styles/layouts/login/LoginView.ts
+++ b/src/styles/layouts/login/LoginView.ts
@ -10,20 +10,17 @@ export const LoginView = styled.main<{auth: string}>`
  width: 100%;
  height: 100vh;

-  background-color: #f9f9f9;
-
  padding: 0;
+  margin: 0;

  @media (max-width: 1196px) {
    flex-direction: column;
-    justify-content: center;
+    justify-content: flex-start;
    align-items: center;

    height: 100%;

-    padding: 20px;
-
-
+    padding: 100px;
  }
 `;

@ -66,10 +63,11 @@ export const LoginContainer = styled.section`
  }

  .line .text {
-      padding: 19px 56px;
-      color: #ABB3BB;
-      font-size: 14px;
+    padding: 19px 56px;
+    color: #ABB3BB;
+    font-size: 14px;
  }
+
  span{
    display: flex;
    align-self: flex-end;
@ -77,6 +75,15 @@ export const LoginContainer = styled.section`
    justify-content: flex-end;
    cursor: pointer;
  }
+  a {
+    :nth-child(5) {
+      align-self: flex-end;
+      margin-right: 5%;
+      margin-bottom: 40px;
+      color: #5d83fc;
+    }
+  }
+
  p{
    color: #8B8B8B;
    text-align: center;
@ -91,5 +98,4 @@ export const LoginContainer = styled.section`
    width: 100%;
    margin: 0;
  }
-
 `;
--- a/src/styles/layouts/pld/PldView.ts
+++ b/src/styles/layouts/pld/PldView.ts
@ -0,0 +1,190 @@
+import styled from "styled-components"
+
+export const PldTableView = styled.main`
+  width: 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
+  }
+
+  .tg .tg-baqh{
+    text-align:center;
+    vertical-align:top
+  }
+  .tg .tg-0lax{
+    text-align:left;
+    vertical-align:top
+  }
+  .tg .tg-womg{
+    background-color:#dddfe1;
+    text-align:center;
+    vertical-align:top
+  }
+
+  h3{
+    font-weight: 600;
+    font-size: 22px;
+    line-height: 54px;
+
+    color: #254F7F;
+  }
+
+  .images {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+
+    margin: 40px;
+  }
+
+  section {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    article {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      width: 40%;
+      height: 8rem;
+
+      margin: 40px;
+
+      border-radius: 20px;
+      box-shadow: 0 0 11px rgba(0, 0, 0, 0.2)  ;
+      -webkit-box-shadow: 0 0 11px rgba(0, 0, 0, 0.2)  ;
+      -moz-box-shadow: 0 0 11px rgba(0, 0, 0, 0.2)  ;
+      background: #F8F8F8;
+
+      cursor: pointer;
+    }
+  }
+
+  footer {
+    label {
+      cursor: pointer;
+      margin: 20px;
+    }
+  }
+`
+
+export const PldGraphView = styled.main`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  flex-direction: column;
+  flex-wrap: wrap;
+
+  width: 100%;
+
+  .select {
+    width: 20rem;
+  }
+
+  input {
+    width: 20rem;
+    height: 3.5rem;
+
+    padding: 14px;
+
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    font-weight: 400;
+
+    border-radius: 6px;
+    border: solid gray 1px;
+
+    background-color: #F9F9F9;
+  }
+
+  section {
+    display: flex;
+    align-items: center;
+
+    flex-wrap: wrap;
+
+    :first-child {
+      justify-content: space-around;
+    }
+    :nth-child(2) {
+      margin-top: 50px;
+      justify-content: space-evenly;
+    }
+
+    width: 100%;
+  }
+
+  footer {
+    label {
+      cursor: pointer;
+      margin: 20px;
+    }
+  }
+`
+
+export const GoBack = styled.label`
+  cursor: pointer
+`
--- a/src/utils/renderIf.ts
+++ b/src/utils/renderIf.ts
@ -0,0 +1,3 @@
+export default function RenderIf({ children, isTrue }) {
+  return isTrue? children : null
+}
--- a/yarn.lock
+++ b/yarn.lock