Merge branch 'feature/nprogress' into 'main'

Feature/nprogress

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

.editorconfig

@@ -0,0 +1,13 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = crlf
+charset = utf-8
+end_of_line = lf
+trim_trailing_whitespace = true
+insert_final_newline = true

.eslintignore

@@ -0,0 +1,3 @@
+node_modules
+next
+/* .js

.eslintrc.json

@@ -0,0 +1,26 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true,
+        "node": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:react/recommended",
+        "plugin:@typescript-eslint/recommended"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true
+        },
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react",
+        "@typescript-eslint"
+    ],
+    "rules": {
+    }
+}

.gitignore

@@ -0,0 +1,32 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel

.prettierrc.json

@@ -0,0 +1,7 @@
+{
+  "semi": false,
+  "singleQuote":true,
+  "arrowParents": "avoid",
+  "trailingComma": "none",
+  "endOfLine": "auto"
+}

babel.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  "presets": ["next/babel"],
+  "plugins": [["styled-components", {"ssr": true}]]
+}

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+}
+
+module.exports = nextConfig

package.json

@@ -0,0 +1,67 @@
+{
+  "name": "smart-energia-web",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest",
+      "prettier",
+      "prettier/react"
+    ]
+  },
+  "dependencies": {
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
+    "@mui/material": "^5.6.4",
+    "@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",
+    "next": "12.1.6",
+    "nprogress": "^0.2.0",
+    "react": "18.1.0",
+    "react-chartjs-2": "^4.1.0",
+    "react-dom": "18.1.0",
+    "react-icons": "^4.3.1",
+    "styled-components": "^5.3.5"
+  },
+  "devDependencies": {
+    "@types/chartjs": "^0.0.31",
+    "@types/faker": "5.5.3",
+    "@types/node": "^17.0.31",
+    "@types/nprogress": "^0.2.0",
+    "@types/react": "^18.0.8",
+    "@types/styled-components": "^5.1.25",
+    "eslint": "8.14.0",
+    "eslint-config-next": "12.1.6",
+    "eslint-config-prettier": "^8.5.0",
+    "husky": "^7.0.4",
+    "lint-staged": "^12.4.1",
+    "prettier": "^2.6.2",
+    "typescript": "^4.6.4"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.ts": [
+      "eslint",
+      "prettier --write"
+    ],
+    "*.tsx": [
+      "eslint",
+      "prettier --write"
+    ]
+  }
+}

pages/_app.tsx

@@ -0,0 +1,61 @@
+import React, { useState, useEffect } from 'react'
+import { useRouter } from 'next/router'
+import { AppProps } from 'next/app'
+import NProgress from 'nprogress'
+
+
+import Sidebar from '../src/components/sidebar/Sidebar'
+import { GlobalStyle } from '../styles/globals'
+import { AppView } from '../styles/app/AppView'
+import '../styles/nprogress/nprogress.css'
+import '../styles/globals.ts'
+
+import Home from '.'
+
+import Head from 'next/head'
+
+function MyApp({ Component, pageProps }: AppProps) {
+  const router = useRouter()
+  const rota = router.pathname
+
+  useEffect(() => {
+    const handleStart = (url) => {
+      console.log(`Loading: ${url}`)
+      NProgress.start()
+    }
+    const handleStop = () => {
+      NProgress.done()
+    }
+
+    router.events.on('routeChangeStart', handleStart)
+    router.events.on('routeChangeComplete', handleStop)
+    router.events.on('routeChangeError', handleStop)
+
+    return () => {
+      router.events.off('routeChangeStart', handleStart)
+      router.events.off('routeChangeComplete', handleStop)
+      router.events.off('routeChangeError', handleStop)
+    }
+  }, [router])
+
+  return (
+    <AppView>
+      <Head>
+        <meta name="viewport" content="viewport-fit=cover" />
+      </Head>
+      <Home auth={rota} />
+      <GlobalStyle />
+      {
+        rota != '/'?
+          <>
+            <Sidebar />
+            <Component {...pageProps} />
+          </>
+          :
+          null
+      }
+    </AppView>
+  )
+}
+
+export default MyApp

pages/_document.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+
+import { ServerStyleSheet } from 'styled-components';
+
+import Document, { 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;
+
+    try {
+      ctx.renderPage = () =>
+      originalRenderPage({
+        enhanceApp: App => props => sheet.collectStyles(<App {...props} />)
+      });
+
+      const initialProps = await Document.getInitialProps(ctx);
+      return {
+      ...initialProps,
+      styles: (
+        <>
+          {initialProps.styles}
+          {sheet.getStyleElement()}
+        </>
+      )
+      };
+      } finally {
+        sheet.seal();
+      }
+    }
+
+    render() {
+      return (
+        <Html>
+          <Head>
+            <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=Bebas+Neue&display=swap" rel="stylesheet"></link>
+            <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=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>
+          <body>
+            <Main />
+            <NextScript />
+          </body>
+        </Html>
+      );
+    }
+}

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/api/hello.js

@@ -0,0 +1,5 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+
+export default function handler(req, res) {
+  res.status(200).json({ name: 'John Doe' })
+}

pages/areaTest.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import BasicButton from '../src/components/buttons/basicButton/BasicButton'
+import Graph from '../src/components/graph/Chart'
+
+export default function areaTest() {
+  return (
+    <Graph title='Indicador de custo' />
+  )
+}

pages/consumption.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import Chart from '../src/components/graph/Chart'
+import Header from '../src/components/header/Header'
+import { ConsumptionView } from '../styles/layouts/consumption/ConsumptionView'
+
+export default function Consumption() {
+  return (
+    <ConsumptionView>
+      <Header name='' />
+      <section>
+        <h1>Consumo</h1>
+        <span>Análise de Consumo</span>
+      </section>
+      <section>
+        <Chart title='Indicador de custo' />
+      </section>
+    </ConsumptionView>
+  )
+}

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/dashboard.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+
+import { DashboardView } from '../styles/layouts/dashboard/DashboardView'
+import MapCard from '../src/components/mapCard/MapCard'
+import GraphCard from '../src/components/graph/graphCard/ChartCard'
+
+export default function Dashboard() {
+  return (
+    <DashboardView>
+      <h1>Visão Geral</h1>
+      <span>Bem Vindo a Smart Energia</span>
+      <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>
+
+      <section className='dashboard'>
+        <GraphCard title='Consumo' subtitle='Gráfico de Consumo' consumption={25} />
+        <GraphCard title='Consumo' subtitle='Gráfico de Consumo' />
+        <GraphCard title='Consumo' subtitle='Gráfico de Consumo' className='footerGraph' />
+      </section>
+    </DashboardView>
+  )
+}

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/index.tsx

@@ -0,0 +1,42 @@
+import React, { useState, useEffect } from 'react'
+import Image from 'next/image';
+import Link from 'next/link';
+import { useRouter } from 'next/router'
+
+
+import { LoginView} from  '../styles/layouts/login/LoginView';
+import { truncateSync } from 'fs';
+
+interface HomeInterface {
+  auth: any
+}
+
+export default function Home({ auth }: HomeInterface) {
+
+  const router = useRouter()
+  const rota = router.pathname
+
+  return (
+    <LoginView auth={rota} >
+      <Image src='/assets/marca1.svg' width={600} height={700}/>
+      <section className="container">
+        <h1>Bem-Vindo</h1>
+        <h2>Estratégias Inteligentes em Gestão de Energia</h2>
+        <input type="text" placeholder='Login'/>
+        <input type="text" placeholder='Senha'/>
+        <span>Esqueceu a senha ?</span>
+        <Link href='/dashboard' >
+          <button>ENTRAR</button>
+        </Link>
+
+        <fieldset>
+          <legend>Ou</legend>
+        </fieldset>
+
+        <p>+55(41) 3012-5900
+        <br /> www.energiasmart.com.br</p>
+
+      </section>
+    </LoginView>
+  )
+}

pages/resumoOperacao.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import Sidebar from '../src/components/sidebar/Sidebar';
+
+import { TableView} from  '../styles/layouts/resumoOperacao/ResumoOperacaoView';
+
+
+
+export default function ResumoOperacao() {
+  return(
+
+
+    <TableView>
+      <h1>Resumo de Operaçoes</h1>
+      <h2>Operações detalhadas</h2>
+      <h3>Seletor Mês</h3>
+
+      <table className="tg">
+<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>
+
+
+    </TableView>
+
+  )
+}

pages/telemetria.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import Image from 'next/image';
+import BasicButton from '../src/components/buttons/basicButton/BasicButton'
+
+import { TelemetriaView} from  '../styles/layouts/telemetria/TelemetriaView';
+
+
+
+export default function Telemetria() {
+  return(
+    <TelemetriaView>
+
+        <section className="container">
+        <Image src='/assets/graphical.png' width={970} height={200} layout='fixed'/>
+
+
+        </section>
+        <BasicButton title='texto'/>
+
+
+
+
+
+
+    </TelemetriaView>
+
+
+
+  )
+}

public/assets/Vector4.svg

@@ -0,0 +1,3 @@
+<svg width="380" height="1" viewBox="0 0 380 1" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.272217 0.564575L379.052 0.564556" stroke="#E1E1E1" stroke-width="0.7"/>
+</svg>

public/assets/hamburgerModal.svg

@@ -0,0 +1,5 @@
+<svg width="26" height="19" viewBox="0 0 26 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="0.118652" width="26" height="2.93413" rx="1.46706" fill="#3E4954"/>
+<rect y="7.94299" width="26" height="2.93413" rx="1.46706" fill="#3E4954"/>
+<rect y="15.7673" width="26" height="2.93413" rx="1.46706" fill="#3E4954"/>
+</svg>

public/graphLineIcon.svg

@@ -0,0 +1,10 @@
+<svg width="23" height="15" viewBox="0 0 23 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.2514 13.6099C2.28739 12.4426 5.64973 9.01062 7.45851 7.15065L14.2299 10.3803L22.1298 0.691376" stroke="#2BC155" stroke-width="2"/>
+<path d="M7.45851 7.15065C5.64973 9.01062 2.28739 12.4426 1.2514 13.6099H22.1298V0.691376L14.2299 10.3803L7.45851 7.15065Z" fill="url(#paint0_linear_49_8)"/>
+<defs>
+<linearGradient id="paint0_linear_49_8" x1="11.6906" y1="2.30619" x2="12.4612" y2="13.6151" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2BC155" stop-opacity="0.73"/>
+<stop offset="1" stop-color="#2BC155" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>

public/icon.svg

@@ -0,0 +1,3 @@
+<svg width="206" height="56" viewBox="0 0 206 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="0.297363" width="206" height="54.7704" rx="8" fill="#254F7F"/>
+</svg>

public/moneyIcon.svg

@@ -0,0 +1,4 @@
+<svg width="96" height="91" viewBox="0 0 96 91" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <ellipse cx="48.2566" cy="45.8947" rx="47.3997" ry="44.9474" fill="#DEE4FF"/>
+  <path d="M56.9224 50.1495C56.9224 51.4295 56.6024 52.6561 55.9624 53.8295C55.3224 54.9761 54.3757 55.9361 53.1224 56.7095C51.8957 57.4828 50.4157 57.9228 48.6824 58.0295V61.2695H46.5224V58.0295C44.0957 57.8161 42.1224 57.0428 40.6024 55.7095C39.0824 54.3495 38.3091 52.6295 38.2824 50.5495H42.1624C42.2691 51.6695 42.6824 52.6428 43.4024 53.4695C44.1491 54.2961 45.1891 54.8161 46.5224 55.0295V45.0295C44.7357 44.5761 43.2957 44.1095 42.2024 43.6295C41.1091 43.1495 40.1757 42.4028 39.4024 41.3895C38.6291 40.3761 38.2424 39.0161 38.2424 37.3095C38.2424 35.1495 38.9891 33.3628 40.4824 31.9495C42.0024 30.5361 44.0157 29.7495 46.5224 29.5895V26.2695H48.6824V29.5895C50.9491 29.7761 52.7757 30.5095 54.1624 31.7895C55.5491 33.0428 56.3491 34.6828 56.5624 36.7095H52.6824C52.5491 35.7761 52.1357 34.9361 51.4424 34.1895C50.7491 33.4161 49.8291 32.9095 48.6824 32.6695V42.4295C50.4424 42.8828 51.8691 43.3495 52.9624 43.8295C54.0824 44.2828 55.0157 45.0161 55.7624 46.0295C56.5357 47.0428 56.9224 48.4161 56.9224 50.1495ZM41.9624 37.1095C41.9624 38.4161 42.3491 39.4161 43.1224 40.1095C43.8957 40.8028 45.0291 41.3761 46.5224 41.8295V32.5895C45.1357 32.7228 44.0291 33.1761 43.2024 33.9495C42.3757 34.6961 41.9624 35.7495 41.9624 37.1095ZM48.6824 55.0695C50.1224 54.9095 51.2424 54.3895 52.0424 53.5095C52.8691 52.6295 53.2824 51.5761 53.2824 50.3495C53.2824 49.0428 52.8824 48.0428 52.0824 47.3495C51.2824 46.6295 50.1491 46.0561 48.6824 45.6295V55.0695Z" fill="#2F4CDD"/>
+</svg>

public/vercel.svg

@@ -0,0 +1,4 @@
+<svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
+</svg>

src/components/banner/Banner.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import Image from 'next/image'
+
+import { BannerView } from './BannerView'
+
+interface BannerInterface {
+  title: string,
+  subtitle: string,
+  imgSource: string
+}
+
+export default function Banner({ title, subtitle, imgSource }: BannerInterface) {
+  return (
+    <BannerView>
+      {/* <Image src={imgSource} width={1458} height={302} layout='intrinsic' /> */}
+      <Image src={imgSource} layout='fill' />
+      <div className='gradient' />
+      <div className='text'>
+        <h1>{title}</h1>
+        <p>{subtitle}</p>
+      </div>
+    </BannerView>
+  )
+}

src/components/banner/BannerView.ts

@@ -0,0 +1,30 @@
+import styled from 'styled-components'
+
+export const BannerView = styled.div`
+  position: relative;
+  width: 100%;
+  height: 19rem;
+
+  .gradient {
+    position: absolute;
+    width: 100%;
+    height: 19rem;
+
+    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), rgba(7, 23, 100, 0.6);
+    opacity: 0.9;
+
+    z-index: 1;
+  }
+
+  .text {
+    position: relative;
+    margin: 82px 0 0 20px;
+
+    font-family: 'Poppins';
+    font-style: normal;
+
+    color: white;
+
+    z-index: 2;
+  }
+`

src/components/buttons/basicButton/BasicButton.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { BasicButtonView } from './BasicButtonView'
+
+interface BasicButtonInterface {
+  title: string
+}
+
+export default function BasicButton({ title }: BasicButtonInterface) {
+  return (
+    <BasicButtonView>{title}</BasicButtonView>
+  )
+}

src/components/buttons/basicButton/BasicButtonView.ts

@@ -0,0 +1,21 @@
+import styled from 'styled-components'
+
+export const BasicButtonView = styled.button`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  width: 120px;
+  height: 45px;
+
+  background: #254F7F;
+  border-radius: 8px;
+  border-style: none;
+
+  font-family: 'Poppins';
+  font-size: 16px;
+  /* identical to box height */
+
+
+  color: #FFFFFF;
+`

src/components/buttons/loginButton/LoginButton.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { LoginButtonView } from './LoginButtonView'
+
+interface LoginButtonInterface {
+  title: string
+}
+
+export default function LoginButton({ title }: LoginButtonInterface) {
+  return (
+    <LoginButtonView>
+      {title}
+    </LoginButtonView>
+  )
+}

src/components/buttons/loginButton/LoginButtonView.ts

@@ -0,0 +1,19 @@
+import styled from 'styled-components'
+
+export const LoginButtonView = styled.button`
+  width: 100%;
+  height: 95px;
+
+  border-radius: 8px;
+  background: linear-gradient(88.75deg, #254F7F 0.18%, #888888 99.28);
+
+  font-family: 'Nunito Sans';
+  font-style: normal;
+  font-weight: 700;
+  font-size: 32px;
+  line-height: 44px;
+  text-align: center;
+  letter-spacing: 0.03em;
+
+  color: #FFFFFF;
+`

src/components/graph/Chart.tsx

@@ -0,0 +1,77 @@
+import React, { useState, useEffect } from 'react'
+
+import { Bar, Line } from 'react-chartjs-2';
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend
+} from 'chart.js'
+
+import faker from 'faker'
+import { ChartView } from './ChartView';
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend
+)
+
+interface ChartInterface {
+  title: string,
+}
+
+export default function Chart({ title }: ChartInterface) {
+  const [ graphData, setGraphData ] = useState({
+    labels: [],
+    datasets: [],
+  })
+  const options = {
+    responsive: true,
+    plugins: {
+      legend: {
+        position: 'bottom' as const,
+      },
+      title: {
+        display: true,
+        text: title,
+      },
+    },
+  };
+
+  const labels = ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'ago', 'set', 'out', 'nov', 'dez'];
+
+  useEffect(() => {
+    setGraphData({
+      labels,
+      datasets: [
+        {
+          label: '2020',
+          data: labels.map(() => faker.datatype.number({ min: 0, max: 1200 })),
+          backgroundColor: 'rgba(53, 162, 235, 5)',
+        },
+        {
+          label: '2021',
+          data: labels.map(() => faker.datatype.number({ min: 0, max: 1200 })),
+          backgroundColor: 'rgba(0, 81, 255, 1)',
+        },
+      ],
+    })
+  }, [])
+
+
+  return (
+    <ChartView>
+      <Bar
+        options={options}
+        data={graphData}
+      />
+    </ChartView>
+  )
+}

src/components/graph/ChartView.ts

@@ -0,0 +1,5 @@
+import styled from "styled-components"
+
+export const ChartView = styled.div`
+  width: 100%;
+`

src/components/graph/graphCard/ChartCard.tsx

@@ -0,0 +1,69 @@
+import React from 'react'
+import Link from 'next/link';
+
+import ToggleButton from '@mui/material/ToggleButton';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+
+import { ChartCardView } from './ChartCardView';
+
+interface ChartCardInterface {
+  title: string,
+  subtitle: string,
+  consumption?: number,
+  className?: string
+}
+
+export default function ChartCard({ title, subtitle, consumption, className }: ChartCardInterface) {
+  const [timeCourse, setTimeCourse] = React.useState<string | null>('left');
+
+  const handleAlignment = (
+    event: React.MouseEvent<HTMLElement>,
+    newAlignment: string | null,
+  ) => {
+    setTimeCourse(newAlignment);
+  };
+
+  return (
+    <ChartCardView className={className} >
+      <div className='content' >
+        <div className='header'>
+          <div>
+            <h4>{title}</h4>
+            <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>
+        </div>
+        {
+          consumption?
+            <aside>
+              <div>
+                <div className='info'><p>{consumption}</p></div>
+                <h4>Consumo</h4>
+                <label className='statusDot' />
+              </div>
+              <Link href='#'>{'Visualizar >'}</Link>
+            </aside>
+              :
+            <></>
+        }
+      </div>
+      <div className='graph' />
+    </ChartCardView>
+  )
+}

src/components/graph/graphCard/ChartCardView.ts

@@ -0,0 +1,108 @@
+import styled from 'styled-components';
+
+export const ChartCardView = styled.article`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  flex-direction: column;
+
+  width: 100%;
+  /* max-width: ; */
+  height: fit-content;
+  min-height: 34.5rem;
+
+  background: #F8F8F8;
+	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)  ;
+  border-radius: 20px;
+
+  background-color: #FFFFFF;
+
+  .graph {
+    width: 90%;
+    min-height: 300px;
+
+    background-color: black;
+
+    margin-bottom: 20px;
+  }
+
+  a {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 24px;
+
+    color: #2F4CDD;
+  }
+
+  .statusDot {
+    max-width: 11px;
+    max-height: 11px;
+    min-width: 11px;
+    min-height: 11px;
+
+    border-radius: 100%;
+
+    background-color: #2BC155;
+  }
+
+  .content {
+    width: 90%;
+
+    margin-top: 20px;
+  }
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    width: 100%;
+  }
+
+  aside {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    flex-direction: row;
+
+    width: 100%;
+    height: 4rem;
+
+    margin: 30px 0 30px 0;
+
+    border-radius: 12px;
+
+    padding: 0 12px 0 12px;
+
+    background-color: #E9FFEF;
+
+    div {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 40%;
+      min-width: 50px;
+    }
+
+    .info {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      width: 87px;
+      height: 44px;
+
+      border-radius: 12px;
+
+      background-color: #2BC155;
+      color: white;
+    }
+  }
+
+`

src/components/header/Header.tsx

@@ -0,0 +1,64 @@
+import React from 'react'
+import Image from 'next/image';
+
+import TextField from '@mui/material/TextField';
+import Avatar from '@mui/material/Avatar';
+
+import { HeaderView } from './HeaderView'
+
+function stringToColor(string: string) {
+  let hash = 0;
+  let i;
+
+  /* eslint-disable no-bitwise */
+  for (i = 0; i < string.length; i += 1) {
+    hash = string.charCodeAt(i) + ((hash << 5) - hash);
+  }
+
+  let color = '#';
+
+  for (i = 0; i < 3; i += 1) {
+    const value = (hash >> (i * 8)) & 0xff;
+    color += `00${value.toString(16)}`.slice(-2);
+  }
+  /* eslint-enable no-bitwise */
+
+  return color;
+}
+
+function stringAvatar(name: string) {
+  return {
+    sx: {
+      bgcolor: stringToColor(name),
+    },
+    children: `${name.split(' ')[0][0]}${name.split(' ')[1][0]}`,
+  };
+}
+
+interface headerInterface {
+  name: string
+}
+
+export default function Header({ name }: headerInterface) {
+
+  return (
+    <HeaderView>
+      <section>
+        <TextField
+          id="outlined-textarea"
+          label="Encontre na Página"
+          placeholder="Encontre na Página"
+          multiline
+          fullWidth
+        />
+      </section>
+      <section>
+        <Image src='/copel.svg' width={150} height={150} />
+        <div className='icon' >
+          olá, {'josé'}
+        </div>
+        <Avatar {...stringAvatar('José Corte')} />
+      </section>
+    </HeaderView>
+  )
+}

src/components/header/HeaderView.ts

@@ -0,0 +1,51 @@
+import styled from "styled-components";
+
+export const HeaderView = styled.header`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-direction: row;
+
+  height: 10rem;
+
+  section {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    margin: 0;
+    padding: 0;
+
+    :first-child {
+      width: 30%;
+    }
+  }
+
+  .icon {
+    position: relative;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 150px;
+    height: 43px;
+
+    border-radius: 8px;
+
+    background-color: #254F7F;
+    color: white;
+
+    transform: translateX(20px);
+
+    ::after {
+      content: "";
+      position: relative;
+      left: 40px;
+      background-color: #FFF;
+      width: 45px;
+      height: 45px;
+      border-radius: 100%;
+    }
+  }
+`

src/components/mapCard/MapCard.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import Image from 'next/image'
+import { MapCardView } from './style'
+
+interface MapCardInterface {
+  title: string,
+  subtitle: string,
+  statistic: string,
+  imgSource: string,
+}
+
+export default function MapCard({ title, subtitle, statistic, imgSource }: MapCardInterface) {
+
+  return (
+    <MapCardView>
+      <Image src={imgSource} width={110} height={110} />
+      <div>
+        <h4>{title}</h4>
+        <span>{subtitle}</span>
+        <article>
+          <Image src="/graphLineIcon.svg" width={20} height={20} />
+          <p>{statistic}</p>
+        </article>
+      </div>
+    </MapCardView>
+  )
+}

src/components/mapCard/style.ts

@@ -0,0 +1,27 @@
+import styled from 'styled-components'
+
+export const MapCardView = styled.figure`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  flex-direction: row;
+
+  margin-right: 25px;
+
+  span {
+    margin-bottom: 25px;
+  }
+
+  div {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    flex-direction: column;
+
+    article {
+      display: flex;
+    }
+  }
+`

src/components/sidebar/Sidebar.tsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react'
+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)
+
+  const [ viewModal, setViewModal ] = useState(false)
+
+  const router = useRouter()
+
+  console.log(router.pathname)
+
+  return (
+    <SidebarView economiaDrawer={economiaDrawer} modalOpen={viewModal} >
+      <div className='hamburger' onClick={() => setViewModal(!viewModal)} >
+        <Image src='/assets/hamburgerModal.svg' width={25} height={25} />
+      </div>
+      <div className='imageNext'>
+        <Image src='/assets/logo.svg' width={100} height={100} />
+      </div>
+      <ul>
+        <Link href='/dashboard'><li className={router.pathname=='/dashboard'? 'actualPath' : null} >{'Visão Geral'}</li></Link>
+        <Link href='/consumption'><li className={router.pathname=='/consumption'? 'actualPath' : null} >{'Consumo'}</li></Link>
+        <Link href='/resumoOperacao'><li className={router.pathname=='/resumoOperacao'? 'actualPath' : null} >{'Resumo de Op. '}</li></Link>
+        <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' >
+        <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='#'><li className={router.pathname=='/news'? 'actualPath' : null}>{'Notícias >'}</li></Link>
+        <Link href='#'><li className={router.pathname=='/sectorialInfo'? 'actualPath' : null}>{'Info Setorial >'}</li></Link>
+        <Link href='#'><li className={router.pathname=='/saq'? 'actualPath' : null}>{'SAQ >'}</li></Link>
+        <Link href='#'><li className={router.pathname=='/aboutus'? 'actualPath' : null}>{'Sobre Nós >'}</li></Link>
+        <Link href='#'><li className={router.pathname=='/notification'? 'actualPath' : null}>{'Notificação >'}</li></Link>
+        <Link href='#'><li className={router.pathname=='/telemetry'? 'actualPath' : null}>{'Telemetria >'}</li></Link>
+      </ul>
+      <aside>
+        <p>Nossos Gerentes estão prontos para atendê-los</p>
+        <div><h3>(xx) XXXX-XXXX</h3></div>
+      </aside>
+    </SidebarView>
+  )
+}

src/components/sidebar/SidebarView.ts

@@ -0,0 +1,157 @@
+import styled from 'styled-components'
+
+interface SidebarViewInterface {
+  economiaDrawer: boolean | null,
+  modalOpen: boolean | null
+}
+
+export const SidebarView = styled.nav<SidebarViewInterface>`
+  position: relative;
+
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+
+  flex-direction: column;
+
+  width: 20%;
+
+  margin: 0;
+  padding: 0;
+
+  box-shadow: 18px 4px 35px rgba(0, 0, 0, 0.02);
+
+  background-color: #FFFFFF;
+
+  .actualPath {
+    border-left: #254F7F solid 8px;
+    background-color: #FAFBFF;
+  }
+
+  ul {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    flex-direction: column;
+
+    list-style: none;
+
+    width: 100%;
+
+    padding: 0;
+
+    li {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+
+      width: 100%;
+      height: 60px;
+
+      font-style: normal;
+      font-weight: 500;
+      font-size: 16px;
+      line-height: 27px;
+      /* identical to box height */
+
+      color: #969BA0;
+
+      cursor: pointer;
+
+      padding-left: 40px;
+
+
+    }
+
+    .economiaDrawer {
+      display: ${props => props.economiaDrawer? 'block' : 'none'};
+    }
+  }
+
+  aside {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    flex-wrap: wrap;
+
+    width: 90%;
+    height: 190px;
+
+    background: linear-gradient(155.54deg, #254F7F 15.63%, #9C9C9C 136.34%);
+    border-radius: 26px;
+
+    p {
+      text-align: center;
+      width: 80%;
+
+      font-family: 'Poppins';
+      font-style: normal;
+      font-weight: 600;
+      font-size: 90%;
+      line-height: 21px;
+      text-align: center;
+
+      color: #FFFFFF;
+    }
+
+    h3 {
+      font-size: 90%;
+    }
+
+    div {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      width: 80%;
+      height: 60px;
+
+      background: #FFFFFF;
+      border-radius: 8px;
+    }
+  }
+
+  .drawer {
+    margin-left: 20px;
+  }
+
+  .hamburger {
+    display: none;
+  }
+
+  @media (max-width: 1196px) {
+    align-items: flex-start;
+
+    width: 100%;
+    /* height: 0%; */
+    /* height: ${props => props.modalOpen? '100%' : null}; */
+
+    padding: 18px;
+
+    border-bottom: solid black 1px;
+
+    z-index: 2;
+
+    .hamburger {
+      display: flex;
+
+      cursor: pointer;
+
+      z-index: 2;
+    }
+    .imageNext {
+      display: none;
+    }
+    ul {
+      display: ${props => props.modalOpen? 'block' : 'none'};
+      min-height: 100vh;
+
+      background-color: #FFF;
+    }
+    aside {
+      display: none;
+    }
+  }
+`

styles/Home.module.css

@@ -0,0 +1,116 @@
+.container {
+  padding: 0 2rem;
+}
+
+.main {
+  min-height: 100vh;
+  padding: 4rem 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.footer {
+  display: flex;
+  flex: 1;
+  padding: 2rem 0;
+  border-top: 1px solid #eaeaea;
+  justify-content: center;
+  align-items: center;
+}
+
+.footer a {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-grow: 1;
+}
+
+.title a {
+  color: #0070f3;
+  text-decoration: none;
+}
+
+.title a:hover,
+.title a:focus,
+.title a:active {
+  text-decoration: underline;
+}
+
+.title {
+  margin: 0;
+  line-height: 1.15;
+  font-size: 4rem;
+}
+
+.title,
+.description {
+  text-align: center;
+}
+
+.description {
+  margin: 4rem 0;
+  line-height: 1.5;
+  font-size: 1.5rem;
+}
+
+.code {
+  background: #fafafa;
+  border-radius: 5px;
+  padding: 0.75rem;
+  font-size: 1.1rem;
+  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
+    Bitstream Vera Sans Mono, Courier New, monospace;
+}
+
+.grid {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  max-width: 800px;
+}
+
+.card {
+  margin: 1rem;
+  padding: 1.5rem;
+  text-align: left;
+  color: inherit;
+  text-decoration: none;
+  border: 1px solid #eaeaea;
+  border-radius: 10px;
+  transition: color 0.15s ease, border-color 0.15s ease;
+  max-width: 300px;
+}
+
+.card:hover,
+.card:focus,
+.card:active {
+  color: #0070f3;
+  border-color: #0070f3;
+}
+
+.card h2 {
+  margin: 0 0 1rem 0;
+  font-size: 1.5rem;
+}
+
+.card p {
+  margin: 0;
+  font-size: 1.25rem;
+  line-height: 1.5;
+}
+
+.logo {
+  height: 1em;
+  margin-left: 0.5rem;
+}
+
+@media (max-width: 600px) {
+  .grid {
+    width: 100%;
+    flex-direction: column;
+  }
+}

styles/app/AppView.ts

@@ -0,0 +1,13 @@
+import styled from 'styled-components'
+
+export const AppView = styled.main`
+  display: flex;
+
+  margin: 0;
+  padding: 0;
+
+  @media (max-width: 1196px) {
+    flex-direction: column;
+    margin: 0;
+  }
+`

styles/globals.ts

@@ -0,0 +1,33 @@
+import { createGlobalStyle } from 'styled-components'
+
+export const GlobalStyle = createGlobalStyle`
+  body {
+    margin: 0;
+    padding: 0;
+    font-family: 'Poppins';
+  }
+
+  main {
+    padding: 2.5rem;
+  }
+
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  * {
+    box-sizing: border-box;
+    /* margin: 0; */
+  }
+`;
+
+// html,
+// body {
+//   padding: 0;
+//   margin: 0;
+//   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+//     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+// }
+
+

styles/layouts/Dashboard/DashboardView.ts

@@ -0,0 +1,112 @@
+import styled from 'styled-components'
+
+export const DashboardView = styled.main`
+  * {
+    margin: 0;
+    padding: 0;
+  }
+
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+
+  flex-wrap: wrap;
+
+  flex-direction: column;
+
+  width: 100%;
+
+  span {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 24px;
+  }
+
+  h4 {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 600;
+    font-size: 21px;
+    line-height: 32px;
+  }
+
+  h1 {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 600;
+    font-size: 28px;
+    line-height: 42px;
+  }
+
+  p {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+  }
+
+  .cardsSection {
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+
+    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;
+  }
+
+  .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) {
+    /* align-items: center; */
+    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%;
+    }
+  }
+`

styles/layouts/Login/LoginView.ts

@@ -0,0 +1,101 @@
+import styled from 'styled-components';
+
+export const LoginView = styled.main<{auth: string}>`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  width: 100%;
+  min-height: fit-content;
+  height: 100vh;
+  background-color: #f9f9f9;
+
+  display: ${props => props.auth == '/'? null : 'none'};
+
+  .container{
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    background-color: #FFFFFF;
+    height: 33rem;
+    text-align: center;
+    border-radius: 4px;
+    width: 100%;
+    max-width: 30rem;
+    padding-left: 50px;
+    padding-right: 50px;
+    margin-left: 8rem;
+  }
+
+  @media screen and (max-width: 1008px) {
+    justify-content: center;
+    .container {
+      margin: 0;
+    }
+  }
+
+  h1{
+    margin-bottom:5px;
+    color: #092C4C;
+  }
+
+  h2{
+    font-weight: 5;
+    font-size: 21px;
+    margin-bottom: 3rem;
+    color: #092C4C;
+  }
+  input{
+
+    width: 100%;
+    height: 15rem;
+    border-radius: 5px;
+    margin-bottom: 10px;
+    border-style: none;
+    border: solid #D0D0D0 1px;
+  }
+
+
+  button{
+    width: 100%;
+    height: 18rem;
+    background-image: linear-gradient(to right, #254F7F 10%, #888888 100%);
+    color: white;
+    font-size: 15px;
+    border-radius: 5px;
+    border: 0;
+    margin-top: 2.5rem;
+  }
+
+  input::placeholder {
+    color: #ABB3BB;
+    font-size: 12px;
+  }
+
+  span {
+    font-size: 12px;
+    color: #254F7F;
+  }
+
+  p {
+    color:#8B8B8B;
+    font-size: 12px;
+    margin-bottom: 22px;
+  }
+
+  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: 19px 56px;
+      color: #ABB3BB;
+      font-size: 14px;
+  }
+`;

styles/layouts/ResumoOperacao/ResumoOperacaoView.ts

@@ -0,0 +1,141 @@
+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;
+  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;
+    font-family:Arial, sans-serif;
+    font-size:14px;
+    overflow:hidden;
+    padding:10px 5px;
+    word-break:normal;
+
+  }
+  .tg th{
+    border-color:black;
+    border-style:solid;
+    border-width:1px;
+    font-family:Arial, sans-serif;
+    font-size:14px;
+    font-weight:normal;
+    overflow:hidden;
+    padding:10px 5px;
+    word-break:normal;
+  } */
+
+  .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
+  }
+
+  h1{
+    color: #000;
+    font-family: Poppins;
+    font-size: 15px
+  }
+  h2{
+    color: #969BA0;
+    font-family: Poppins;
+    font-size: 11px;
+    font-weight: 400;
+    margin-top: 1px;
+  }
+
+
+  h3{
+    color: #254F7F;
+    font-family: Poppins;
+    font-size: 15px;
+    margin-top: 5rem;
+    }
+`;

styles/layouts/Telemetria/TelemetriaView.ts

@@ -0,0 +1,42 @@
+
+import styled from 'styled-components';
+
+
+export const TelemetriaView = styled.div`
+    display: flex;
+    padding-left: 11rem;
+    align-items: center;
+    justify-content: flex-start;
+    background-color: #000;
+    height: 100vh;
+    width: 100%;
+
+  .container{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+
+    background-image: linear-gradient(to right, #254F7F 10%, #888888 100%);
+    width: 60rem;
+
+
+  }
+
+
+  .main{
+    display: flex;
+    justify-content: flex-start;
+    width: 70%;
+
+
+
+
+
+    margin-top: 25rem;
+
+  }
+
+
+
+`;

styles/layouts/consumption/ConsumptionView.ts

@@ -0,0 +1,26 @@
+import styled from "styled-components";
+
+export const ConsumptionView = 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/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;
+    }
+  }
+`

styles/nprogress/nprogress.css

@@ -0,0 +1,81 @@
+* Make clicks pass-through */
+#nprogress {
+    pointer-events: none;
+  }
+
+  #nprogress .bar {
+    background: #254F7F;
+
+    position: fixed;
+    z-index: 1031;
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    height: 2px;
+  }
+
+  /* Fancy blur effect */
+  #nprogress .peg {
+    display: block;
+    position: absolute;
+    right: 0px;
+    width: 100px;
+    height: 100%;
+    box-shadow: 0 0 10px #254F7F, 0 0 5px #254F7F;
+    opacity: 1;
+
+    -webkit-transform: rotate(3deg) translate(0px, -4px);
+    -ms-transform: rotate(3deg) translate(0px, -4px);
+    transform: rotate(3deg) translate(0px, -4px);
+  }
+
+  /* Remove these to get rid of the spinner */
+  #nprogress .spinner {
+    display: block;
+    position: fixed;
+    z-index: 1031;
+    top: 15px;
+    right: 15px;
+  }
+
+  #nprogress .spinner-icon {
+    width: 18px;
+    height: 18px;
+    box-sizing: border-box;
+
+    border: solid 2px transparent;
+    border-top-color: #254F7F;
+    border-left-color: #254F7F;
+    border-radius: 50%;
+
+    -webkit-animation: nprogress-spinner 400ms linear infinite;
+    animation: nprogress-spinner 400ms linear infinite;
+  }
+
+  .nprogress-custom-parent {
+    overflow: hidden;
+    position: relative;
+  }
+
+  .nprogress-custom-parent #nprogress .spinner,
+  .nprogress-custom-parent #nprogress .bar {
+    position: absolute;
+  }
+
+  @-webkit-keyframes nprogress-spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+    }
+  }
+  @keyframes nprogress-spinner {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }

tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}