add preliminares updates

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"

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;

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);

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 const,
+  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 >'}<div className='notification'><p>25</p></div></li></Link>
         <Link href='/aboutUs'><li className={router.pathname=='/aboutUs'? 'actualPath' : null}><Image src='/assets/sidebar/aboutUs.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>

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

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>

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

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

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

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;
 

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

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%;

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

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"