update finallity

2022-05-24 09:30:05 -03:00 · 2022-05-24 09:30:05 -03:00 · 6b30ebc1d6
commit 6b30ebc1d6
parent bbf0080761
15 changed files with 158 additions and 63 deletions
--- a/package.json
+++ b/package.json
@ -25,6 +25,7 @@
    "@mui/material": "^5.6.4",
    "@mui/x-data-grid": "^5.11.0",
    "@mui/x-date-pickers": "^5.0.0-alpha.3",
+    "@types/react-csv": "^1.1.2",
    "@typescript-eslint/eslint-plugin": "^5.22.0",
    "@typescript-eslint/parser": "^5.22.0",
    "chart.js": "^3.7.1",
@ -40,6 +41,7 @@
    "react": "18.1.0",
    "react-calendar": "^3.7.0",
    "react-chartjs-2": "^4.1.0",
+    "react-csv": "^2.2.2",
    "react-dom": "18.1.0",
    "react-icons": "^4.3.1",
    "styled-components": "^5.3.5"
--- a/src/components/buttons/basicButton/BasicButtonView.ts
+++ b/src/components/buttons/basicButton/BasicButtonView.ts
@ -4,7 +4,7 @@ export const BasicButtonView = styled.button`
  display: flex;
  justify-content: center;
  align-items: center;
-  margin-top: 10px;
+  margin-top: 1px;

  width: 140px;
  height: 45px;
--- a/src/components/buttons/gradientButton/GradientButtonView.ts
+++ b/src/components/buttons/gradientButton/GradientButtonView.ts
@ -21,9 +21,9 @@ export const GradientButtonView = styled.button`
  'linear-gradient(200.86deg, #F48665 8.03%, #F48665  91.97%), #FFFFFF'
  :
  props.color === 'purple'?
-  'linear-gradient(200.69deg, #9A56FF 8.53%, #D78AFD 91.47%), #FFFFFF'
+  'linear-gradient(200.69deg, #9A56FF 9%, #D78AFD 98%), #FFFFFF'
  :
-  'linear-gradient(200.69deg, #23BDB8 8.53%, #43E794 91.47%), #FFFFFF'
+  'linear-gradient(200.69deg, #23BDB8 8.53%, #43E794 98%), #FFFFFF'
  };

  box-shadow: 0.5px 3px 10px rgba(119, 119, 119, 0.1);
--- a/src/components/sidebar/Sidebar.tsx
+++ b/src/components/sidebar/Sidebar.tsx
@ -2,10 +2,33 @@ import React, { useState, useEffect } from 'react'
 import { useRouter } from 'next/router'
 import Image from 'next/image'
 import Link from 'next/link'
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import Modal from '@mui/material/Modal';
+import Stack from '@mui/material/Stack';
+
+

 import { SidebarView } from './SidebarView'

+const style = {
+  position: 'absolute' as 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: 400,
+  bgcolor: 'background.paper',
+  border: '2px solid #000',
+  boxShadow: 24,
+  p: 4,
+};
+
 export default function Sidebar() {
+  const [open, setOpen] = React.useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
  const [ economiaDrawer, setEconomiaDrawer ] = useState(false)

  const [ viewModal, setViewModal ] = useState(false)
@ -36,12 +59,27 @@ export default function Sidebar() {
        <Link href='/telemetria'><li className={router.pathname=='/telemetria'? 'actualPath' : null}><Image src='/assets/sidebar/telemetryIcon.svg' width={25} height={25} />{'Telemetria >'}</li></Link>
        <Link href='/resumoOperacao'><li className={router.pathname=='/resumoOperacao'? 'actualPath' : null} ><Image src='/assets/sidebar/summaryOperationsIcon.svg' width={25} height={25} />{'Resumo de Op. '}</li></Link>
        <Link href='/news'><li className={router.pathname=='/news'? 'actualPath' : null}><Image src='/assets/sidebar/newsIcon.svg' width={25} height={25} />{'Notícias >'}</li></Link>
+        <Link href='/pld'><li className={router.pathname=='/pld'? 'actualPath' : null}><Image src='/assets/sidebar/newsIcon.svg' width={25} height={25} />{'PLD >'}</li></Link>
        <Link href='/industryInfo'><li className={router.pathname=='/industryInfo'? 'actualPath' : null}><Image src='/assets/sidebar/sectorialInfoIcon.svg' width={25} height={25} />{'Info Setorial >'}</li></Link>
        {/* <Link href='/consumption'><li className={router.pathname=='/consumption'? 'actualPath' : null} ><Image src='/assets/sidebar/consumptionIcon.svg' width={25} height={25} />{'Consumo'}</li></Link> */}
        <Link href='/notifications'><li className={router.pathname=='/notifications'? 'actualPath' : null}><Image src='/assets/sidebar/notificationsIcon.svg' width={25} height={25} />{'Notificações >'}</li></Link>
        <Link href='/aboutUs'><li className={router.pathname=='/aboutUs'? 'actualPath' : null}><Image src='/assets/sidebar/dashboardIcon.svg' width={25} height={25} />{'Sobre Nós >'}</li></Link>
        <Link href='/faq'><li className={router.pathname=='/faq'? 'actualPath' : null}><Image src='/assets/sidebar/saqIcon.svg' width={25} height={25} />{'FAQ >'}</li></Link>
-        <Link href='/'><button><Image src='/assets/logout.svg' width={25} height={25} />{'Sair'}</button></Link>
+        <button onClick={handleOpen}><Image src='/assets/logout.svg' width={25} height={25} />{'Sair'}</button>
+        <Modal
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="modal-modal-title"
+        aria-describedby="modal-modal-description"
+        >
+         <Box sx={style}>
+          <Typography id="modal-modal-title" variant="h6" component="h2">
+            Deseja realmente sair ?
+          </Typography>
+          <Link href='/'><Button variant="contained"  sx={{mt:5}}>Sim</Button></Link>
+          <Button variant="contained" onClick={handleClose} color="error" sx={{mt:5 ,ml:1}}>Não</Button>
+        </Box>
+      </Modal>
      </ul>
      <aside>
        <p>Nossos Gerentes estão prontos para atendê-los</p>
--- a/src/files/teste.csv
+++ b/src/files/teste.csv
@ -0,0 +1,8 @@
+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;122,269;EMEWE I5;190,16;5.235,88
+Unidade- 9500130;Compra;122,269;EMEWE I5;234,67;27.978,37
+Unidade - 9500689;Compra;122,269;PACTO COMERCIALIZADORA I5;300,36;38.257,15
+Unidade- 9500130;Compra;122,269;EMEWE I5;234,67;38.257,15
+Unidade- 9500130;Compra;122,269;PACTO COMERCIALIZADORA I5;234,67;5.965,95
--- a/src/pages/dashboard.tsx
+++ b/src/pages/dashboard.tsx
@ -42,7 +42,7 @@ export default function Dashboard() {
        <GraphCard title='Consumo' subtitle='Gráfico de Consumo'>
          <SingleBar title='Economia Bruta' subtitle='(Valores em R$ mil)' label={dataEconomiaBruta.labels} dataset='Consolidada' dataset1='Estimada' dataProps={dataEconomiaBruta.data} barLabel year/>
        </GraphCard>
-        <GraphCard title='Economia Acumulado' subtitle='Economia Acumulado' singleBar>
+        <GraphCard title='Economia Acumulada' subtitle='Economia Acumulada' singleBar>
          <SingleBar title='Economia Bruta Estimada e Acumulada' subtitle='(Valores em R$)' dataset='Acumulada' dataset1='Estimado' label={EconomiaAcumulada.label1}  dataProps={EconomiaAcumulada.data2} barLabel day/>
        </GraphCard>
        <GraphCard title='Custos Estimados' subtitle='Custos Estimados em R$/MWh' singleBar>
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@ -46,7 +46,11 @@ export default function Home() {
      <Head>
        <title>Smart Energia</title>
      </Head>
-      <Image src='/assets/marca1.svg' width={350} height={350} />
+
+      <div>
+      <Image src='/assets/marca1.svg' width={520} height={350} />
+      </div>
+
      <LoginContainer>
        <h1>Bem-Vindo</h1>
        <h2>Estratégias Inteligentes em<br /> Gestão de Energia</h2>
--- a/src/pages/industryInfo.tsx
+++ b/src/pages/industryInfo.tsx
@ -15,7 +15,7 @@ export default function industryInfo() {
      <div className='title'>
        <PageTitle title='Info Setorial' subtitle='info setorial' />
      </div>
-      <BasicButton title='Baixar PDF' />
+      <button>Baixar PDF</button>
    </IndustryInfoView>
  )
 }
--- a/src/pages/news.tsx
+++ b/src/pages/news.tsx
@ -4,6 +4,7 @@ import Header from '../components/header/Header'
 import BasicButton from '../components/buttons/basicButton/BasicButton';
 import { NewsView, Button } from '../styles/layouts/news/NewsView'
 import Head from 'next/head';
+import Link from 'next/link'

 export default function aboutUs() {
  return (
@ -42,7 +43,12 @@ export default function aboutUs() {
        <legend> <BasicButton  title='Ver Mais...' /></legend>
        </fieldset>
        </Button>
+
      </section>
+
+      <a href='https://www.energiasmart.com.br/noticias/'
+     target={"_blank"}
+     rel={"noreferrer"}><BasicButton  title='Noticias Atualizadas' /></a>
    </NewsView>
  )
 }
--- a/src/pages/resumoOperacao.tsx
+++ b/src/pages/resumoOperacao.tsx
@ -10,11 +10,32 @@ import MenuItem from '@mui/material/MenuItem';
 import FormControl from '@mui/material/FormControl';
 import Select, { SelectChangeEvent } from '@mui/material/Select';
 import Box from '@mui/material/Box';
+// import Teste from '../files/teste.csv';
+import { CSVLink, CSVDownload } from "react-csv";
+
+

 import { Pagination, TableView } from '../styles/layouts/ResumoOperacao/ResumoOperacaoView';
 import Head from 'next/head';

 export default function ResumoOperacao() {
+  const csvData = [
+    // ["firstname", "lastname", "email"],
+    // ["Ahmed", "Tomi", "ah@smthing.co.com"],
+    // ["Raed", "Labes", "rl@smthing.co.com"],
+    // ["Yezzi", "Min l3b", "ymin@cocococo.com"],
+
+
+
+      [ "value", "unidade1", "name", "Unidade-1",  "operacao", "Compra", "montante", "130,00", "contraparte", "cOPEL COM I5", "preco", "234,67", "valorNF", "38.257,15" ],
+      [ "value", "unidade2", "name", "Unidade-2",  "operacao", "Compra", "montante", "20,00", "contraparte",  "EMEWE I5", "preco", "234,67", "valorNF", "38.257,15"],
+      [ "value", "unidade3", "name", "Unidade-3",  "operacao", "Compra", "montante", "30,00", "contraparte",  "EMEWE I5", "preco", "234,67", "valorNF", "38.257,15" ],
+      [ "value", "unidade4", "name", "Unidade-4",  "operacao", "Compra", "montante", "40,00", "contraparte",  "COPEL COM I5", "preco", "234,67", "valorNF", "38.257,15" ],
+      [ "value", "unidade5", "name", "Unidade-5",  "operacao", "Compra", "montante", "500,00","contraparte", "COPEL COM I5", "preco", "234,67", "valorNF", "38.257,15" ],
+      [ "value", "unidade6", "name", "Unidade-6", "operacao", "Compra", "montante", "300,00", "contraparte", "COPEL COM I5", "preco","234,67", "valorNF", "965,95" ]
+
+  ];
+
  const [month, setMonth] = React.useState('');
  const [unidade, setUnidade] = React.useState('');

@ -65,7 +86,7 @@ export default function ResumoOperacao() {
      </FormControl>


-      <FormControl fullWidth >
+      <FormControl fullWidth sx={{ml:1}} >

        <InputLabel id="demo-simple-select-label">Mês</InputLabel>
        <Select
@ -126,60 +147,22 @@ export default function ResumoOperacao() {
              }
            })
          }
-            {/* <td className='tg-gceh'>{data.unidades.unidade1.name}</td>
-            <td className='tg-uulg'>{data.unidades.unidade1.operacao}</td>
-            <td className='tg-gceh'>{data.unidades.unidade1.montante}</td>
-            <td className='tg-gceh'>{data.unidades.unidade1.contraparte}</td>
-            <td className='tg-uulg'>{data.unidades.unidade1.preco}</td>
-            <td className='tg-gceh'>{data.unidades.unidade1.valorNF}</td> */}
-          {/* <tr>
-            <td className='tg-hq65'>Unidade - 9500130</td>
-            <td className='tg-0tzy'>Compra</td>
-            <td className='tg-hq65'>110,348</td>
-            <td className='tg-hq65'>EMEWE I5</td>
-            <td className='tg-0tzy'>190,16</td>
-            <td className='tg-hq65'>27.978,37</td>
-          </tr>
-          <tr>
-            <td className="tg-gceh">Unidade - 9500130</td>
-            <td className="tg-uulg">Compra</td>
-            <td className="tg-gceh">13,074</td>
-            <td className="tg-gceh">PACTO COMERCIALIZADORA I5</td>
-            <td className="tg-gceh">300,36</td>
-            <td className="tg-gceh">5.235,88</td>
-          </tr>
-          <tr>
-            <td className='tg-hq65'>Unidade - 9500130</td>
-            <td className='tg-0tzy'>Compra</td>
-            <td className='tg-hq65'>133,117</td>
-            <td className='tg-hq65'>COPEL COM I5</td>
-            <td className='tg-0tzy'>300,36</td>
-            <td className='tg-hq65'>41.651,42</td>
-          </tr>
-          <tr>
-            <td className='tg-gceh'>Unidade - 9500130</td>
-            <td className='tg-uulg'>Compra</td>
-            <td className='tg-gceh'>120,138</td>
-            <td className='tg-gceh'>EMEWE I5</td>
-            <td className='tg-uulg'>234,67</td>
-            <td className='tg-gceh'>30.460,59</td>
-          </tr>
-          <tr>
-            <td className='tg-hq65'>Unidade - 9500130</td>
-            <td className='tg-0tzy'>Compra</td>
-            <td className='tg-hq65'>14,897</td>
-            <td className='tg-hq65'>PACTO COMERCIALIZADORA I5</td>
-            <td className='tg-0tzy'>300,36</td>
-            <td className='tg-hq65'>5.965,95</td>
-          </tr> */}
+
        </tbody>
      </table>
-      <BasicButton title='Baixar PDF' />
+      <div className='btn'>
+
+        {/* <a href={Teste} download="dowload.csv"> */}
+          {/* <BasicButton title='Baixar PDF'  /> */}
+        {/* </a> */}
+
+        <CSVLink data={csvData} filename="Arquivo_Teste_Smart_Energia">
+
+        <BasicButton title='Baixar CSV'  />
+        </CSVLink>
+
+      </div>

-      <Pagination>
-        <p>Mostrando 1 a 10 de 30 Entradas</p>
-        <p >Anterior <span className='number'>01</span>     <span className='numberColor'>02  ..  05</span>  <span className='number'>Proxima</span> </p>
-      </Pagination>
    </TableView>
  )
 }
--- a/src/styles/layouts/ResumoOperacao/ResumoOperacaoView.ts
+++ b/src/styles/layouts/ResumoOperacao/ResumoOperacaoView.ts
@ -10,6 +10,14 @@ export const TableView = styled.div`
  width: 100%;
  height: 100%;

+  img{
+    margin-left:30rem;
+  }
+
+  .btn{
+    margin-top: 10px;
+  }
+
  .select{
    display: flex;

--- a/src/styles/layouts/industryInfo/IndustryInfoView.ts
+++ b/src/styles/layouts/industryInfo/IndustryInfoView.ts
@ -9,4 +9,19 @@ export const IndustryInfoView = styled.main`
  .title {
    margin-bottom: 50px;
  }
+button{
+  height:60px;
+  width: 22%;
+  margin-top: 17rem;
+  cursor: pointer;
+  background: #254F7F;
+  border-radius: 8px;
+  border-style: none;
+
+  font-family: 'Poppins';
+  font-size: 90%;
+
+
+  color: #FFFFFF;
+}
 `
--- a/src/styles/layouts/login/LoginView.ts
+++ b/src/styles/layouts/login/LoginView.ts
@ -4,7 +4,7 @@ import styled from 'styled-components';
 export const LoginView = styled.main<{auth: string}>`
  display: flex;
  display: ${props => props.auth == '/'? null : 'none'};
-  justify-content: flex-end;
+  justify-content: center;
  align-items: center;

  width: 100%;
@ -13,6 +13,7 @@ export const LoginView = styled.main<{auth: string}>`
  padding: 0;
  margin: 0;

+
  @media (max-width: 1196px) {
    flex-direction: column;
    justify-content: flex-start;
@ -96,7 +97,7 @@ export const LoginContainer = styled.section`
    align-items: center;

    width: 100%;
-    margin: 0;
+
  }
  @media (max-width: 1640px) {
    font-size: 80%;
--- a/src/styles/layouts/news/NewsView.ts
+++ b/src/styles/layouts/news/NewsView.ts
@ -21,6 +21,21 @@ export const NewsView = styled.main`
      display: flex;
      margin-bottom: 8px;
    }
+    button{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 10px;
+    width: 140px;
+    height: 45px;
+    cursor: pointer;
+    background: #254F7F;
+    border-radius: 8px;
+    border-style: none;
+    font-family: 'Poppins';
+    font-size: 90%;
+    color: #FFFFFF;
+   }
  }

  section {
@ -39,6 +54,8 @@ export const NewsView = styled.main`
        flex-direction: column;
      }
    }
+
+
 }`;

 export const Button = styled.div`
@ -62,4 +79,5 @@ export const Button = styled.div`
      color: #ABB3BB;
      font-size: 14px;
  }
+
 `;
--- a/yarn.lock
+++ b/yarn.lock
@ -1419,6 +1419,13 @@
  version "15.7.5"
  resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz"

+"@types/react-csv@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@types/react-csv/-/react-csv-1.1.2.tgz#a5694d7e5cbf4bc1d4baa178a3fa7ac3466ea8c5"
+  integrity sha512-hCtZyXAubxBtn3Oi3I9kNAx2liRTaMtl1eWpO2M98aYkHuoSTbYO8OcZEjyr9aJJ30Xnoxj+uES3G6L6O1qgtg==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-is@^16.7.1 || ^17.0.0":
  version "17.0.3"
  resolved "https://registry.npmjs.org/@types/react-is/-/react-is-17.0.3.tgz"
@ -3898,6 +3905,11 @@ react-chartjs-2@^4.1.0:
  version "4.1.0"
  resolved "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-4.1.0.tgz"

+react-csv@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/react-csv/-/react-csv-2.2.2.tgz#5bbf0d72a846412221a14880f294da9d6def9bfb"
+  integrity sha512-RG5hOcZKZFigIGE8LxIEV/OgS1vigFQT4EkaHeKgyuCbUAu9Nbd/1RYq++bJcJJ9VOqO/n9TZRADsXNDR4VEpw==
+
 react-dom@18.1.0:
  version "18.1.0"
  resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.1.0.tgz"