Merge branch 'dashboard' into 'dev'
Dashboard See merge request kluppsoftware/smart-energia-web!4
This commit is contained in:
José Corte
commit
0f399b61be
@ -35,8 +35,11 @@ export default class MyDocument extends Document {
|
||||
<Html>
|
||||
<Head>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com"/>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="true" />
|
||||
<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 />
|
||||
|
||||
124
pages/dashboard.tsx
Normal file
124
pages/dashboard.tsx
Normal file
@ -0,0 +1,124 @@
|
||||
import React from 'react'
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
|
||||
import { DashboardView } from '../styles/layouts/Dashboard/DashboardView'
|
||||
|
||||
export default function Dashboard() {
|
||||
return (
|
||||
<div style={{
|
||||
'display': 'flex'
|
||||
}}>
|
||||
<div className='sideBar' style={{
|
||||
'width': '35rem',
|
||||
'height': '146vh',
|
||||
'backgroundColor': 'grey'
|
||||
}}></div>
|
||||
<DashboardView>
|
||||
<header>
|
||||
<input />
|
||||
<figure>
|
||||
<Image src='/copel.svg' width={125} height={125} />
|
||||
<div>
|
||||
<figure />
|
||||
</div>
|
||||
</figure>
|
||||
</header>
|
||||
<h1>Visão Geral</h1>
|
||||
<span>Bem Vindo a Smart Energia</span>
|
||||
<section className="cardSection" >
|
||||
<figure>
|
||||
<Image src="/moneyIcon.svg" width={125} height={125} />
|
||||
<div>
|
||||
<h4>R$/MWh</h4>
|
||||
<span>abril / 22</span>
|
||||
</div>
|
||||
</figure>
|
||||
<figure>
|
||||
<Image src="/mapSample.svg" width={125} height={125} />
|
||||
<div>
|
||||
<h4>SE/CO</h4>
|
||||
<span>Sudeste</span>
|
||||
<figure>
|
||||
<Image src="/graphLineIcon.svg" width={20} height={20} />
|
||||
<p> R$ 273,54</p>
|
||||
</figure>
|
||||
</div>
|
||||
</figure>
|
||||
<figure>
|
||||
<Image src="/mapSample.svg" width={125} height={125} />
|
||||
<div>
|
||||
<h4>SE/CO</h4>
|
||||
<span>Sudeste</span>
|
||||
<figure>
|
||||
<Image src="/graphLineIcon.svg" width={20} height={20} />
|
||||
<p> R$ 273,54</p>
|
||||
</figure>
|
||||
</div>
|
||||
</figure>
|
||||
<figure>
|
||||
<Image src="/mapSample.svg" width={125} height={125} />
|
||||
<div>
|
||||
<h4>SE/CO</h4>
|
||||
<span>Sudeste</span>
|
||||
<figure>
|
||||
<Image src="/graphLineIcon.svg" width={20} height={20} />
|
||||
<p> R$ 273,54</p>
|
||||
</figure>
|
||||
</div>
|
||||
</figure>
|
||||
<figure>
|
||||
<Image src="/mapSample.svg" width={125} height={125} />
|
||||
<div>
|
||||
<h4>SE/CO</h4>
|
||||
<span>Sudeste</span>
|
||||
<figure>
|
||||
<Image src="/graphLineIcon.svg" width={20} height={20} />
|
||||
<p> R$ 273,54</p>
|
||||
</figure>
|
||||
</div>
|
||||
</figure>
|
||||
</section>
|
||||
|
||||
<section className='dashboard'>
|
||||
<article>
|
||||
<div>
|
||||
<h4>Consumo</h4>
|
||||
<span>Gráfico de Consumo</span>
|
||||
<></>
|
||||
</div>
|
||||
<aside className='asideConsumo'>
|
||||
<div className='asideConsumoContent' >
|
||||
<div className='count' >
|
||||
<h4>25</h4>
|
||||
</div>
|
||||
<h5>consumo</h5>
|
||||
<div className='statusDot' ></div>
|
||||
</div>
|
||||
<Link href="#">{"Visualizar >"}</Link>
|
||||
</aside>
|
||||
<div className='graph' />
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<div>
|
||||
<h4>Indicador de custo</h4>
|
||||
<span>Valores em R$/ MWh</span>
|
||||
<></>
|
||||
</div>
|
||||
<div className='graph' />
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<div>
|
||||
<h4>Consumo</h4>
|
||||
<span>Gráfico de Consumo</span>
|
||||
<></>
|
||||
</div>
|
||||
<div className='graphBig' />
|
||||
</article>
|
||||
</section>
|
||||
</DashboardView>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
9
public/copel.svg
Normal file
9
public/copel.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 53 KiB |
10
public/graphLineIcon.svg
Normal file
10
public/graphLineIcon.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 667 B |
9
public/mapSample.svg
Normal file
9
public/mapSample.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 20 KiB |
4
public/moneyIcon.svg
Normal file
4
public/moneyIcon.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
0
src/assets/txt.txt
Normal file
0
src/assets/txt.txt
Normal file
0
src/components/txt.txt
Normal file
0
src/components/txt.txt
Normal file
@ -0,0 +1,198 @@
|
||||
import styled from 'styled-components'
|
||||
|
||||
export const DashboardView = styled.main`
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
|
||||
margin: 60px;
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
.graph {
|
||||
width: 42rem;
|
||||
height: 310px;
|
||||
|
||||
background-color: grey
|
||||
}
|
||||
|
||||
.graphBig {
|
||||
width: 90rem;
|
||||
height: 310px;
|
||||
|
||||
background-color: grey
|
||||
}
|
||||
|
||||
.cardSection {
|
||||
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;
|
||||
|
||||
span {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
figure {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
flex-direction: row;
|
||||
|
||||
margin-right: 25px;
|
||||
|
||||
|
||||
|
||||
:first-child {
|
||||
margin-right: 95px;
|
||||
}
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
flex-direction: column;
|
||||
|
||||
figure {
|
||||
margin: 0;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
flex-wrap: wrap;
|
||||
|
||||
article {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
|
||||
flex-direction: column;
|
||||
|
||||
max-width: 120rem;
|
||||
min-width: fit-content;
|
||||
|
||||
min-height: 30rem;
|
||||
|
||||
margin-bottom: 30px;
|
||||
|
||||
padding: 30px;
|
||||
|
||||
/* border: solid black 1px; */
|
||||
box-shadow: 0px 0px 15px -3px rgba(0,0,0,0.1);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.asideConsumo {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
flex-direction: row;
|
||||
|
||||
width: 32rem;
|
||||
height: 4rem;
|
||||
|
||||
margin: 30px 0 30px 0;
|
||||
|
||||
border-radius: 12px;
|
||||
|
||||
padding: 0 12px 0 12px;
|
||||
|
||||
background-color: #E9FFEF;
|
||||
|
||||
a {
|
||||
font-family: 'Poppins';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
/* identical to box height */
|
||||
|
||||
|
||||
color: #2F4CDD;
|
||||
}
|
||||
|
||||
.asideConsumoContent {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
width: 40%;
|
||||
|
||||
.count {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
width: 87px;
|
||||
height: 44px;
|
||||
|
||||
border-radius: 12px;
|
||||
|
||||
background-color: #2BC155;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
.statusDot {
|
||||
max-width: 11px;
|
||||
max-height: 11px;
|
||||
min-width: 11px;
|
||||
min-height: 11px;
|
||||
|
||||
border-radius: 100%;
|
||||
|
||||
background-color: #2BC155;
|
||||
}
|
||||
}
|
||||
`
|
||||
Loading…
x
Reference in New Issue
Block a user