diff --git a/package.json b/package.json index 04bec83..00c931d 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "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": { diff --git a/pages/index.tsx b/pages/index.tsx index e0f63f7..14bfc65 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,10 +1,49 @@ import React from 'react' import Image from 'next/image'; + +import Box from '@mui/material/Box'; +import IconButton from '@mui/material/IconButton'; +import Input from '@mui/material/Input'; +import FilledInput from '@mui/material/FilledInput'; +import OutlinedInput from '@mui/material/OutlinedInput'; +import InputLabel from '@mui/material/InputLabel'; +import InputAdornment from '@mui/material/InputAdornment'; +import FormHelperText from '@mui/material/FormHelperText'; +import FormControl from '@mui/material/FormControl'; + + import { LoginView} from '../styles/layouts/Login/LoginView'; export default function Home() { + // interface State { + // amount: string; + // password: string; + // weight: string; + // weightRange: string; + // showPassword: boolean; + // } + // const [values, setValues] = React.useState({ + // amount: '', + // password: '', + // weight: '', + // weightRange: '', + // showPassword: false, + // }); + + // const handleChange = + // (prop: keyof State) => (event: React.ChangeEvent) => { + // setValues({ ...values, [prop]: event.target.value }); + // }; + + // const handleClickShowPassword = () => { + // setValues({ + // ...values, + // showPassword: !values.showPassword, + // }); + // }; + return ( diff --git a/pages/resumoOperacao.tsx b/pages/resumoOperacao.tsx new file mode 100644 index 0000000..6accec3 --- /dev/null +++ b/pages/resumoOperacao.tsx @@ -0,0 +1,91 @@ +import React from 'react'; +import Sidebar from '../src/components/sidebar/Sidebar'; + +import { TableView} from '../styles/layouts/ResumoOperacao/ResumoOperacaoView'; + + + +export default function ResumoOperacao() { + return( + + + + +

Resumo de Operaçoes

+

Operações detalhadas

+

Seletor Mês

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
UnidadeOperaçãoMontante(MWh)ContrapartePreço(R$/MWh)Valor NF/Crédito (R$)
Unidade-19888comprar122.269COPEL COM I5234,6738.257,15
Unidade-19888Comprar122.269PACTO COMERCIALIZADORA I5234,6738.257,15
Unidade-19888Comprar122.269PACTO COMERCIALIZADORA I5234,6738.257,15
Unidade-19888Comprar122.269PACTO COMERCIALIZADORA I5234,6738.257,15
Unidade-19888Comprar122.269PACTO COMERCIALIZADORA I5234,6738.257,15
+ + + + ) +} diff --git a/pages/telemetria.tsx b/pages/telemetria.tsx new file mode 100644 index 0000000..c8e0ef0 --- /dev/null +++ b/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( + + +
+ + + +
+ + + + + + + + + + + + ) +} diff --git a/public/assets/graphical.png b/public/assets/graphical.png new file mode 100644 index 0000000..883120b Binary files /dev/null and b/public/assets/graphical.png differ diff --git a/styles/layouts/Login/LoginView.ts b/styles/layouts/Login/LoginView.ts index c41cd27..b262a65 100644 --- a/styles/layouts/Login/LoginView.ts +++ b/styles/layouts/Login/LoginView.ts @@ -3,24 +3,37 @@ import styled from 'styled-components'; export const LoginView = styled.main` display: flex; align-items: center; - justify-content: center; - margin-left: 10rem; + justify-content: flex-end; + flex-wrap: wrap; + width: 100%; + min-height: fit-content; + height: 100vh; + background-color: #f9f9f9; + + .container{ display: flex; - justify-content: center; align-items: center; flex-direction: column; - background-color: #F9F9F9; - height: 34rem; - width: 49rem; - margin-left: 10rem; - margin-top:4rem; - color: #092C4C; + 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; @@ -32,17 +45,18 @@ export const LoginView = styled.main` color: #092C4C; } input{ - width: 30rem; + + width: 100%; height: 15rem; border-radius: 5px; margin-bottom: 10px; border-style: none; border: solid #D0D0D0 1px; - } + button{ - width: 30rem; + width: 100%; height: 18rem; background-image: linear-gradient(to right, #254F7F 10%, #888888 100%); color: white; @@ -55,8 +69,10 @@ export const LoginView = styled.main` color: #ABB3BB; font-size: 12px; } + + span{ - margin-left: 23rem; + font-size: 12px; color: #254F7F; @@ -79,7 +95,7 @@ export const LoginView = styled.main` border-right: none; display: block; text-align: center; - width: 30rem; + width: 100%; } @@ -88,17 +104,26 @@ export const LoginView = styled.main` color: #ABB3BB; font-size: 14px; } - img{ - /* background-color: black; */ - display: none; - } - - - - @media (max-width: 1150px) { - img{visibility:hidden } + + + + + +/* .app { + display: grid; + place-items: center; + min-height: 100vh;; +} +.password-field{ + padding: 0.5rem 1rem; } + .btnClick{ + padding: 1px; + font-size: 1.2rem; + outline: none; + border: none; + } */ diff --git a/styles/layouts/ResumoOperacao/ResumoOperacaoView.ts b/styles/layouts/ResumoOperacao/ResumoOperacaoView.ts new file mode 100644 index 0000000..0056968 --- /dev/null +++ b/styles/layouts/ResumoOperacao/ResumoOperacaoView.ts @@ -0,0 +1,62 @@ +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; + + +} +.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; + } +`; diff --git a/styles/layouts/Telemetria/TelemetriaView.ts b/styles/layouts/Telemetria/TelemetriaView.ts new file mode 100644 index 0000000..765928d --- /dev/null +++ b/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; + + } + + + +`; diff --git a/yarn.lock b/yarn.lock index fcbd8cf..6e9008c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2375,6 +2375,11 @@ react-dom@18.1.0: loose-envify "^1.1.0" scheduler "^0.22.0" +react-icons@^4.3.1: + version "4.3.1" + resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.3.1.tgz#2fa92aebbbc71f43d2db2ed1aed07361124e91ca" + integrity sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ== + react-is@^16.13.1, react-is@^16.7.0: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"