diff --git a/pages/accumulatedSavings.tsx b/pages/accumulatedSavings.tsx index dc7970e..bdeac4b 100644 --- a/pages/accumulatedSavings.tsx +++ b/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 (
-
-

Economia Acumulada

- Economia Bruta Estimada e Acumulada anual (Valores em R$ mil) -
+
diff --git a/pages/consumption.tsx b/pages/consumption.tsx index 299655c..f19f0bb 100644 --- a/pages/consumption.tsx +++ b/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 (
-
-

Consumo

- Análise de Consumo -
+
diff --git a/pages/costIndicator.tsx b/pages/costIndicator.tsx index 520528b..fd03e16 100644 --- a/pages/costIndicator.tsx +++ b/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 (
-
-

Indicador de Custo

- Valores em R$/MWh -
+
diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx index 5bd9939..9124a72 100644 --- a/pages/dashboard.tsx +++ b/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 ( -

Visão Geral

- Bem Vindo a Smart Energia +
+
diff --git a/pages/estimatedCost.tsx b/pages/estimatedCost.tsx index 6f0c923..e2310ce 100644 --- a/pages/estimatedCost.tsx +++ b/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 (
-
-

Custo Estimado

- Comparativo de Custo Estimado -
+
diff --git a/pages/grossSavings.tsx b/pages/grossSavings.tsx index 8fbcea4..865e201 100644 --- a/pages/grossSavings.tsx +++ b/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 (
-
-

Economia Bruta

- Economia Bruta Estimada e Acumulada anual (Valores em R$ mil) -
+
diff --git a/pages/resumoOperacao.tsx b/pages/resumoOperacao.tsx index cd2c42a..28faec4 100644 --- a/pages/resumoOperacao.tsx +++ b/pages/resumoOperacao.tsx @@ -1,84 +1,79 @@ 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( - - -

Resumo de Operaçoes

-

Operações detalhadas

+
+ +

Seletor Mês

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Unidade OperaçãoMontante (MWh)ContrapartePreço(R$/MWh)ValorNF/Crédito(R$)
Unidade - 9500130Compra122,269COPEL COM I5234,6738.257,15
Unidade - 9500130Compra110,348EMEWE I5190,1627.978,37
Unidade - 9500130Compra13,074PACTO COMERCIALIZADORA I5300,365.235,88
Unidade - 9500130Compra133,117COPEL COM I5300,3641.651,42
Unidade - 9500130Compra120,138EMEWE I5234,6730.460,59
Unidade - 9500130Compra14,897PACTO COMERCIALIZADORA I5300,365.965,95
- - + + + Unidade + Operação + Montante (MWh) + Contraparte + Preço(R$/MWh) + ValorNF/Crédito(R$) + + + + + Unidade - 9500130 + Compra + 122,269 + COPEL COM I5 + 234,67 + 38.257,15 + + + Unidade - 9500130 + Compra + 110,348 + EMEWE I5 + 190,16 + 27.978,37 + + + Unidade - 9500130 + Compra + 13,074 + PACTO COMERCIALIZADORA I5 + 300,36 + 5.235,88 + + + Unidade - 9500130 + Compra + 133,117 + COPEL COM I5 + 300,36 + 41.651,42 + + + Unidade - 9500130 + Compra + 120,138 + EMEWE I5 + 234,67 + 30.460,59 + + + Unidade - 9500130 + Compra + 14,897 + PACTO COMERCIALIZADORA I5 + 300,36 + 5.965,95 + + + - ) } diff --git a/public/assets/png/copel.png b/public/assets/png/copel.png new file mode 100644 index 0000000..3a1d498 Binary files /dev/null and b/public/assets/png/copel.png differ diff --git a/public/assets/png/copel.xcf b/public/assets/png/copel.xcf new file mode 100644 index 0000000..3e7bb9c Binary files /dev/null and b/public/assets/png/copel.xcf differ diff --git a/public/copel.svg b/public/copel.svg index d95856e..8271189 100644 --- a/public/copel.svg +++ b/public/copel.svg @@ -1,9 +1,9 @@ - - - - - - - - + + + + + + + + diff --git a/src/components/graph/ChartView.ts b/src/components/graph/ChartView.ts index 0b07fbc..7df3e4b 100644 --- a/src/components/graph/ChartView.ts +++ b/src/components/graph/ChartView.ts @@ -1,5 +1,5 @@ import styled from "styled-components" export const ChartView = styled.div` - width: 100%; + width: 80%; ` diff --git a/src/components/graph/graphCard/ChartCard.tsx b/src/components/graph/graphCard/ChartCard.tsx index bbc374d..b71de03 100644 --- a/src/components/graph/graphCard/ChartCard.tsx +++ b/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
-

{title}

+

{title}

{subtitle}
}
-
+ ) } diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx index 62269be..34c865b 100644 --- a/src/components/header/Header.tsx +++ b/src/components/header/Header.tsx @@ -53,7 +53,7 @@ export default function Header({ name }: headerInterface) { />
- +
olá, {'josé'}
diff --git a/src/components/header/HeaderView.ts b/src/components/header/HeaderView.ts index 20d822f..8b87195 100644 --- a/src/components/header/HeaderView.ts +++ b/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; + width: 30%; - 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; - background-color: #FFF; + left: 2.5rem; + background-color: #fff; width: 45px; height: 45px; - border-radius: 100%; + border-radius: 50%; + } + } + + @media (max-width: 1020px) { + .icon { + display: none; + } + section { + width: 50%; } } ` diff --git a/src/components/mapCard/MapCard.tsx b/src/components/mapCard/MapCard.tsx index f308a4a..a70a738 100644 --- a/src/components/mapCard/MapCard.tsx +++ b/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

{title}

{subtitle}
- -

{statistic}

+ { + statistic? + <> + +

{statistic}

+ + : + null + }
diff --git a/src/components/mapCard/style.ts b/src/components/mapCard/style.ts index f33a672..36e3f69 100644 --- a/src/components/mapCard/style.ts +++ b/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; } diff --git a/src/components/pageTitle/PageTitle.tsx b/src/components/pageTitle/PageTitle.tsx new file mode 100644 index 0000000..091dd06 --- /dev/null +++ b/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 ( + +

{title}

+

{subtitle}

+ + ) +} diff --git a/src/components/pageTitle/PageTitleView.ts b/src/components/pageTitle/PageTitleView.ts new file mode 100644 index 0000000..e903e9e --- /dev/null +++ b/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; +} +` diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx index 5ac7741..97d6566 100644 --- a/src/components/sidebar/Sidebar.tsx +++ b/src/components/sidebar/Sidebar.tsx @@ -1,9 +1,9 @@ -import React, { useState } from 'react' -import Image from 'next/image' +import React, { useState, useEffect } from 'react' 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 ( @@ -38,7 +40,7 @@ export default function Sidebar() {
  • {'SAQ >'}
  • {'Sobre Nós >'}
  • {'Notificação >'}
    • -
  • {'Telemetria >'}
    • +
  • {'Telemetria >'}