Smart/smartEnergyView-frontend
2
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'dev' into 'feature/loginStyledComponents'

Browse Source 
# Conflicts:
#   pages/index.tsx
This commit is contained in:
Alex Da Silva Santos 2022-05-07 00:10:40 +00:00
commit f04050307c
33 changed files with 872 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -22,15 +22,18 @@
"@mui/material": "^5.6.4", "@mui/material": "^5.6.4",
"@typescript-eslint/eslint-plugin": "^5.22.0", "@typescript-eslint/eslint-plugin": "^5.22.0",
"@typescript-eslint/parser": "^5.22.0", "@typescript-eslint/parser": "^5.22.0",
"chart.js": "^3.7.1",
"eslint-plugin-react": "^7.29.4", "eslint-plugin-react": "^7.29.4",
"eslit": "^6.0.0", "eslit": "^6.0.0",
"next": "12.1.6", "next": "12.1.6",
"react": "18.1.0", "react": "18.1.0",
"react-chartjs-2": "^4.1.0",
"react-dom": "18.1.0", "react-dom": "18.1.0",
"react-icons": "^4.3.1", "react-icons": "^4.3.1",
"styled-components": "^5.3.5" "styled-components": "^5.3.5"
}, },
"devDependencies": { "devDependencies": {
"@types/chartjs": "^0.0.31",
"@types/node": "^17.0.31", "@types/node": "^17.0.31",
"@types/react": "^18.0.8", "@types/react": "^18.0.8",
"@types/styled-components": "^5.1.25", "@types/styled-components": "^5.1.25",

11
pages/_app.tsx
View File

@ -1,13 +1,18 @@
import React from 'react' import React from 'react'
import '../styles/globals.css' import '../styles/globals.ts'
import { AppProps } from 'next/app' import { AppProps } from 'next/app'
import Sidebar from '../src/components/sidebar/Sidebar'
import { GlobalStyle } from '../styles/globals'
import { AppView } from '../styles/app/AppView'
function MyApp({ Component, pageProps }: AppProps) { function MyApp({ Component, pageProps }: AppProps) {
return ( return (
<> <AppView>
<GlobalStyle />
<Sidebar />
<Component {...pageProps} /> <Component {...pageProps} />
</> </AppView>
) )
} }

5
pages/_document.tsx
View File

@ -35,8 +35,11 @@ export default class MyDocument extends Document {
<Html> <Html>
<Head> <Head>
<link rel="preconnect" href="https://fonts.googleapis.com"/> <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 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> </Head>
<body> <body>
<Main /> <Main />

10
pages/areaTest.tsx Normal file
View File

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

27
pages/dashboard.tsx Normal file
View File

@ -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/GraphCard'
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>
)
}

8
pages/index.tsx
View File

@ -46,14 +46,12 @@ export default function Home() {
return ( return (
<LoginView> <LoginView>
<Image src='/assets/marca1.svg' width={600} height={700}/>
<Image src='/assets/marca1.svg' width={400} height={400} layout='fixed'/>
<section className="container"> <section className="container">
<h1>Bem-Vindo</h1> <h1>Bem-Vindo</h1>
<h2>Estratégias Inteligentes em <br/> Gestão de Energia</h2> <h2>Estratégias Inteligentes em Gestão de Energia</h2>
<input type="text" placeholder='Login'/> <input type="text" placeholder='Login'/>
<input type="password" placeholder='Senha'/> <input type="text" placeholder='Senha'/>
<span>Esqueceu a senha ?</span> <span>Esqueceu a senha ?</span>
<button>ENTRAR</button> <button>ENTRAR</button>

BIN
public/assets/bannerTemplate.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 MiB

5
public/assets/hamburgerModal.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 332 B

9
public/assets/logo.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 859 KiB

9
public/copel.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 53 KiB

10
public/graphLineIcon.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 667 B

9
public/mapSample.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

4
public/moneyIcon.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

0
src/assets/txt.txt Normal file
View File

24
src/components/banner/Banner.tsx Normal file
View File

@ -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>
)
}

30
src/components/banner/BannerView.ts Normal file
View File

@ -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;
}
`

12
src/components/buttons/basicButton/BasicButton.tsx Normal file
View File

@ -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>
)
}

21
src/components/buttons/basicButton/BasicButtonView.ts Normal file
View File

@ -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;
`

14
src/components/buttons/loginButton/LoginButton.tsx Normal file
View File

@ -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>
)
}

19
src/components/buttons/loginButton/LoginButtonView.ts Normal file
View File

@ -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;
`

63
src/components/graph/Graph.tsx Normal file
View File

@ -0,0 +1,63 @@
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'
ChartJS.register(
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend
)
export default function Graph() {
const [ graphData, setGraphData ] = useState({
labels: [],
datasets: [],
})
const [ graphOptions, setGraphOptions ] = useState({})
useEffect(() => {
setGraphData({
labels: ['John', 'kevin', 'george', 'michael', 'oreo'],
datasets: [{
label: "Whom'st let the dogsout",
data: [12, 55, 34, 120, 720],
borderColor: "rgb(53, 162, 235)",
backgroundColor: "rgb(53, 162, 235, 0.4)"
}]
})
setGraphOptions({
responsive: true,
plugins: {
legend: {
position: 'top'
},
title: {
display: true,
text: "Whom'st let the dogsout"
}
}
})
}, [])
return (
<Line
options={graphOptions}
data={graphData}
// {}
/>
)
}

69
src/components/graph/graphCard/GraphCard.tsx Normal file
View File

@ -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 { GraphCardView } from './GraphCardView';
interface GraphCardInterface {
title: string,
subtitle: string,
consumption?: number,
className?: string
}
export default function GraphCard({ title, subtitle, consumption, className }: GraphCardInterface) {
const [timeCourse, setTimeCourse] = React.useState<string | null>('left');
const handleAlignment = (
event: React.MouseEvent<HTMLElement>,
newAlignment: string | null,
) => {
setTimeCourse(newAlignment);
};
return (
<GraphCardView 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' />
</GraphCardView>
)
}

108
src/components/graph/graphCard/GraphCardView.ts Normal file
View File

@ -0,0 +1,108 @@
import styled from 'styled-components';
export const GraphCardView = 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;
}
}
`

27
src/components/mapCard/MapCard.tsx Normal file
View File

@ -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>
)
}

27
src/components/mapCard/style.ts Normal file
View File

@ -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;
}
}
`

42
src/components/sidebar/Sidebar.tsx Normal file
View File

@ -0,0 +1,42 @@
import Image from 'next/image'
import React, { useState } from 'react'
import { SidebarView } from './SidebarView'
export default function Sidebar() {
const [ economiaDrawer, setEconomiaDrawer ] = useState(false)
const [ viewModal, setViewModal ] = useState(false)
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>
<li>{'Visão Geral'}</li>
<li>{'Consumo'}</li>
<li>{'Resumo de Op. >'}</li>
<li onClick={() => setEconomiaDrawer(!economiaDrawer)} >{'Economia >'}</li>
<div className='economiaDrawer drawer' >
<li>Economia Bruta</li>
<li>Economia Acumulada</li>
<li>Custo Estimado</li>
<li>Custo R/MWh</li>
</div>
<li>{'Notícias >'}</li>
<li>{'Info Setorial >'}</li>
<li>{'SAQ >'}</li>
<li>{'Sobre Nós >'}</li>
<li>{'Notificação >'}</li>
<li>{'Telemetria >'}</li>
</ul>
<aside>
<p>Nossos Gerentes estão prontos para atendê-los</p>
<div><h3>(xx) XXXX-XXXX</h3></div>
</aside>
</SidebarView>
)
}

142
src/components/sidebar/SidebarView.ts Normal file
View File

@ -0,0 +1,142 @@
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;
ul {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
list-style: none;
width: 100%;
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;
}
.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: 14px;
line-height: 21px;
text-align: center;
color: #FFFFFF;
}
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;
}
}
`

0
src/components/txt.txt Normal file
View File

9
styles/app/AppView.ts Normal file
View File

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

16
styles/globals.css
View File

@ -1,16 +0,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;
}
a {
color: inherit;
text-decoration: none;
}
* {
box-sizing: border-box;
}

28
styles/globals.ts Normal file
View File

@ -0,0 +1,28 @@
import { createGlobalStyle } from 'styled-components'
export const GlobalStyle = createGlobalStyle`
body {
margin: 0;
padding: 0;
font-family: 'Poppins';
}
a {
color: inherit;
text-decoration: none;
}
* {
box-sizing: border-box;
}
`;
// 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;
// }

114
styles/layouts/Dashboard/DashboardView.ts
View File

@ -0,0 +1,114 @@
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%;
padding: 30px;
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%;
}
}
`

15
yarn.lock
View File

@ -575,6 +575,11 @@
resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.1.3.tgz#6801033be7ff87a6b7cadaf5b337c9f366a3c4b0" resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.1.3.tgz#6801033be7ff87a6b7cadaf5b337c9f366a3c4b0"
integrity sha512-WiBSI6JBIhC6LRIsB2Kwh8DsGTlbBU+mLRxJmAe3LjHTdkDpwIbEOZgoXBbZilk/vlfjK8i6nKRAvIRn1XaIMw== integrity sha512-WiBSI6JBIhC6LRIsB2Kwh8DsGTlbBU+mLRxJmAe3LjHTdkDpwIbEOZgoXBbZilk/vlfjK8i6nKRAvIRn1XaIMw==
"@types/chartjs@^0.0.31":
version "0.0.31"
resolved "https://registry.yarnpkg.com/@types/chartjs/-/chartjs-0.0.31.tgz#b16a687eaad3ea3e5cd3e961aee5a28e47b57949"
integrity sha512-eF1AgrIO0qP9KJYwM2dTKL2pczTjiLa0hfmZdQfKiqFq5WIvFTKPn1gkgADitF5sT4byEyq4EFdMVvuPIk6zeQ==
"@types/hoist-non-react-statics@*": "@types/hoist-non-react-statics@*":
version "3.3.1" version "3.3.1"
resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f" resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
@ -954,6 +959,11 @@ chalk@^4.0.0:
ansi-styles "^4.1.0" ansi-styles "^4.1.0"
supports-color "^7.1.0" supports-color "^7.1.0"
chart.js@^3.7.1:
version "3.7.1"
resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-3.7.1.tgz#0516f690c6a8680c6c707e31a4c1807a6f400ada"
integrity sha512-8knRegQLFnPQAheZV8MjxIXc5gQEfDFD897BJgv/klO/vtIyFFmgMXrNfgrXpbTr/XbTturxRgxIXx/Y+ASJBA==
clean-stack@^2.0.0: clean-stack@^2.0.0:
version "2.2.0" version "2.2.0"
resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b" resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"
@ -2352,6 +2362,11 @@ queue-microtask@^1.2.2:
resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243" resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A== integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
react-chartjs-2@^4.1.0:
version "4.1.0"
resolved "https://registry.yarnpkg.com/react-chartjs-2/-/react-chartjs-2-4.1.0.tgz#2a123df16d3a987c54eb4e810ed766d3c03adf8d"
integrity sha512-AsUihxEp8Jm1oBhbEovE+w50m9PVNhz1sfwEIT4hZduRC0m14gHWHd0cUaxkFDb8HNkdMIGzsNlmVqKiOpU74g==
react-dom@18.1.0: react-dom@18.1.0:
version "18.1.0" version "18.1.0"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.1.0.tgz#7f6dd84b706408adde05e1df575b3a024d7e8a2f" resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.1.0.tgz#7f6dd84b706408adde05e1df575b3a024d7e8a2f"