🚑 fix code

pages/accumulatedSavings.tsx

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

pages/consumption.tsx

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

pages/costIndicator.tsx

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

pages/dashboard.tsx

@@ -3,12 +3,14 @@ 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'
+import Header from '../src/components/header/Header'
+import PageTitle from '../src/components/pageTitle/PageTitle'
 
 export default function Dashboard() {
   return (
     <DashboardView>
-      <h1>Visão Geral</h1>
+      <Header name='' />
-      <span>Bem Vindo a Smart Energia</span>
+      <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' />

pages/estimatedCost.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 
 import Chart from '../src/components/graph/Chart'
 import Header from '../src/components/header/Header'
+import PageTitle from '../src/components/pageTitle/PageTitle'
 
 import { EstimatedCostView } from '../styles/layouts/economy/estimatedCost/EstimatedCostView'
 
@@ -9,10 +10,7 @@ export default function EstimatedCost() {
   return (
     <EstimatedCostView>
       <Header name='' />
-      <section>
+      <PageTitle title='Custos Estimados' subtitle='Comparativo de Custo Estimado' />
-        <h1>Custo Estimado</h1>
-        <span>Comparativo de Custo Estimado</span>
-      </section>
       <section>
         <Chart title='Indicador de custo' />
       </section>

pages/grossSavings.tsx

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

pages/resumoOperacao.tsx

@@ -1,19 +1,17 @@
 import React from 'react';
+import Header from '../src/components/header/Header';
+import PageTitle from '../src/components/pageTitle/PageTitle';
 import Sidebar from '../src/components/sidebar/Sidebar';
 
-import { TableView} from  '../styles/layouts/resumoOperacao/ResumoOperacaoView';
+import { TableView } from '../styles/layouts/ResumoOperacao/ResumoOperacaoView';
-
-
 
 export default function ResumoOperacao() {
   return(
-
-
     <TableView>
-      <h1>Resumo de Operaçoes</h1>
+      <Header name='' />
-      <h2>Operações detalhadas</h2>
+      <PageTitle title='Resumo de Operaçoes' subtitle='Operações detalhadas' />
-      <h3>Seletor Mês</h3>
 
+      <h3>Seletor Mês</h3>
       <table className="tg">
         <thead>
           <tr>
@@ -76,9 +74,6 @@ export default function ResumoOperacao() {
           </tr>
         </tbody>
       </table>
-
-
     </TableView>
-
   )
 }

src/components/graph/ChartView.ts

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

src/components/graph/graphCard/ChartCard.tsx

@@ -5,6 +5,7 @@ import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 
 import { ChartCardView } from './ChartCardView';
+import Chart from '../Chart';
 
 interface ChartCardInterface {
   title: string,
@@ -28,7 +29,7 @@ export default function ChartCard({ title, subtitle, consumption, className }: C
       <div className='content' >
         <div className='header'>
           <div>
-            <h4>{title}</h4>
+            <h2>{title}</h2>
             <span>{subtitle}</span>
           </div>
           <ToggleButtonGroup
@@ -63,7 +64,7 @@ export default function ChartCard({ title, subtitle, consumption, className }: C
             <></>
         }
       </div>
-      <div className='graph' />
+      <Chart title='' />
     </ChartCardView>
   )
 }

src/components/header/Header.tsx

@@ -53,7 +53,7 @@ export default function Header({ name }: headerInterface) {
         />
       </section>
       <section>
-        <Image src='/copel.svg' width={150} height={150} />
+        <Image src='/assets/png/copel.png' width={150} height={50} />
         <div className='icon' >
           olá, {'josé'}
         </div>

src/components/header/HeaderView.ts

@@ -2,22 +2,22 @@ import styled from "styled-components";
 
 export const HeaderView = styled.header`
   display: flex;
-  align-items: center;
   justify-content: space-between;
-  flex-direction: row;
 
-  height: 10rem;
+  margin: 0 0 75px 0;
+
+  width: 100%;
 
   section {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    margin: 0;
-    padding: 0;
-
-    :first-child {
     width: 30%;
+
+
+    :last-child {
+      display: flex;
+      justify-content: center;
+      align-items: flex-start;
+
+      height: fit-content;
     }
   }
 
@@ -29,7 +29,7 @@ export const HeaderView = styled.header`
     justify-content: center;
 
     width: 150px;
-    height: 43px;
+    height: 40px;
 
     border-radius: 8px;
 
@@ -41,11 +41,20 @@ export const HeaderView = styled.header`
     ::after {
       content: "";
       position: relative;
-      left: 40px;
+      left: 2.5rem;
-      background-color: #FFF;
+      background-color: #fff;
       width: 45px;
       height: 45px;
-      border-radius: 100%;
+      border-radius: 50%;
+    }
+  }
+
+  @media (max-width: 1020px) {
+    .icon {
+      display: none;
+    }
+    section {
+      width: 50%;
     }
   }
 `

src/components/mapCard/MapCard.tsx

@@ -5,7 +5,7 @@ import { MapCardView } from './style'
 interface MapCardInterface {
   title: string,
   subtitle: string,
-  statistic: string,
+  statistic?: string,
   imgSource: string,
 }
 
@@ -18,8 +18,15 @@ export default function MapCard({ title, subtitle, statistic, imgSource }: MapCa
         <h4>{title}</h4>
         <span>{subtitle}</span>
         <article>
+          {
+            statistic?
+              <>
                 <Image src="/graphLineIcon.svg" width={20} height={20} />
                 <p>{statistic}</p>
+              </>
+              :
+              null
+          }
         </article>
       </div>
     </MapCardView>

src/components/mapCard/style.ts

@@ -9,6 +9,11 @@ export const MapCardView = styled.figure`
 
   margin-right: 25px;
 
+  * {
+    margin: 0;
+    padding: 0;
+  }
+
   span {
     margin-bottom: 25px;
   }

src/components/pageTitle/PageTitle.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { PageTitleView } from './PageTitleView'
+
+interface PageTitleInterface {
+  title: string,
+  subtitle: string
+}
+
+export default function PageTitle({ title, subtitle }: PageTitleInterface) {
+  return (
+    <PageTitleView>
+      <h1>{title}</h1>
+      <p>{subtitle}</p>
+    </PageTitleView>
+  )
+}

src/components/pageTitle/PageTitleView.ts

@@ -0,0 +1,27 @@
+import styled from "styled-components";
+
+export const PageTitleView = styled.div`
+display: flex;
+justify-content: center;
+align-items: flex-start;
+
+flex-direction: column;
+
+width: 100%;
+
+h1 {
+  margin: 0;
+}
+
+p {
+  margin: 0;
+
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 27px;
+
+  color: #969BA0;
+}
+`

src/components/sidebar/Sidebar.tsx

@@ -1,9 +1,9 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
-import Image from 'next/image'
 import { useRouter } from 'next/router'
+import Image from 'next/image'
+import Link from 'next/link'
 
 import { SidebarView } from './SidebarView'
-import Link from 'next/link'
 
 export default function Sidebar() {
   const [ economiaDrawer, setEconomiaDrawer ] = useState(false)
@@ -12,7 +12,9 @@ export default function Sidebar() {
 
   const router = useRouter()
 
-  console.log(router.pathname)
+  useEffect(() => {
+    setViewModal(false)
+  }, [router.pathname])
 
   return (
     <SidebarView economiaDrawer={economiaDrawer} modalOpen={viewModal} >
@@ -38,7 +40,7 @@ export default function Sidebar() {
         <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>
+        <Link href='/telemetria'><li className={router.pathname=='/telemetry'? 'actualPath' : null}>{'Telemetria >'}</li></Link>
       </ul>
       <aside>
         <p>Nossos Gerentes estão prontos para atendê-los</p>

src/components/sidebar/SidebarView.ts

@@ -121,7 +121,7 @@ export const SidebarView = styled.nav<SidebarViewInterface>`
     display: none;
   }
 
-  @media (max-width: 1196px) {
+  @media (max-width: 1548px) {
     align-items: flex-start;
 
     width: 100%;

styles/app/AppView.ts

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

styles/layouts/Dashboard/DashboardView.ts

@@ -1,11 +1,6 @@
 import styled from 'styled-components'
 
 export const DashboardView = styled.main`
-  * {
-    margin: 0;
-    padding: 0;
-  }
-
   display: flex;
   justify-content: center;
   align-items: flex-start;
@@ -16,38 +11,6 @@ export const DashboardView = styled.main`
 
   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;

styles/layouts/ResumoOperacao/ResumoOperacaoView.ts

@@ -76,11 +76,11 @@ display: flex;
   vertical-align:top
 }
 
-h1{
+/* h1{
     color: #000;
     font-family: Poppins;
     font-size: 15px;
-  }
+  } */
   /* .tg td{
     border-color:black;
     border-style:solid;
@@ -117,7 +117,7 @@ h1{
     text-align:center;
     vertical-align:top
   }
-
+/*
   h1{
     color: #000;
     font-family: Poppins;
@@ -129,13 +129,14 @@ h1{
     font-size: 11px;
     font-weight: 400;
     margin-top: 1px;
-  }
+  }*/
 
 
   h3{
+    font-weight: 600;
+    font-size: 22px;
+    line-height: 54px;
+
     color: #254F7F;
-    font-family: Poppins;
-    font-size: 15px;
-    margin-top: 5rem;
     }
 `;

styles/layouts/consumption/ConsumptionView.ts

@@ -6,21 +6,13 @@ export const ConsumptionView = styled.main`
 
   width: 100%;
 
-  span {
-    color: #969BA0;
-
-    font-family: 'Poppins';
-    font-style: normal;
-    font-weight: 500;
-    font-size: 16px;
-    line-height: 24px;
-  }
-
   section {
-    margin-bottom: 160px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 
     canvas {
-      max-height: 30rem;
+      margin: 160px 0 0 0
     }
   }
 `

styles/layouts/economy/accumulatedSavings/AccumulatedSavingsView.ts

@@ -6,21 +6,13 @@ export const AccumulatedSavingsView = styled.main`
 
   width: 100%;
 
-  span {
-    color: #969BA0;
-
-    font-family: 'Poppins';
-    font-style: normal;
-    font-weight: 500;
-    font-size: 16px;
-    line-height: 24px;
-  }
-
   section {
-    margin-bottom: 160px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 
     canvas {
-      max-height: 30rem;
+      margin: 160px 0 0 0;
     }
   }
 `

styles/layouts/economy/costIndicator/CostIndicatorView.ts

@@ -6,21 +6,13 @@ export const CostIndicatorView = styled.main`
 
   width: 100%;
 
-  span {
-    color: #969BA0;
-
-    font-family: 'Poppins';
-    font-style: normal;
-    font-weight: 500;
-    font-size: 16px;
-    line-height: 24px;
-  }
-
   section {
-    margin-bottom: 160px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 
     canvas {
-      max-height: 30rem;
+      margin: 160px 0 0 0;
     }
   }
 `

styles/layouts/economy/estimatedCost/EstimatedCostView.ts

@@ -6,21 +6,13 @@ export const EstimatedCostView = styled.main`
 
   width: 100%;
 
-  span {
-    color: #969BA0;
-
-    font-family: 'Poppins';
-    font-style: normal;
-    font-weight: 500;
-    font-size: 16px;
-    line-height: 24px;
-  }
-
   section {
-    margin-bottom: 160px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 
     canvas {
-      max-height: 30rem;
+      margin: 160px 0 0 0;
     }
   }
 `

styles/layouts/economy/grossSavings/GrossSavings.ts

@@ -17,10 +17,12 @@ export const GrossSavingsView = styled.main`
   }
 
   section {
-    margin-bottom: 160px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 
     canvas {
-      max-height: 30rem;
+      margin: 160px 0 0 0;
     }
   }
 `